[{"_1":2,"_91":-5,"_92":-5},"loaderData",{"_3":4,"_6":7,"_43":44},"root",{"_5":-5},"theme","routes/tags+/_layout",{"_8":9,"_24":25},"siteData",{"_10":11,"_12":13,"_14":11,"_15":16,"_17":18,"_5":19,"_20":21,"_22":23},"title","夜猫的小站","author","owl","headerTitle","description","欢迎来到我的博客","language","zh","system","locale","en-US","blog_path","data/content","navs",{"_24":26},[27,31,34,37,40],{"_28":29,"_10":30},"href","/","首页",{"_28":32,"_10":33},"/posts","文章",{"_28":35,"_10":36},"/archieve","归档",{"_28":38,"_10":39},"/tags","标签",{"_28":41,"_10":42},"/about","关于","routes/tags+/$tag",{"_45":46,"_47":48},"tag","css","posts",[49],{"_50":51,"_52":53,"_69":70,"_79":80,"_89":90},"code","var Component=(()=>{var h=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var g=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),v=(e,n)=>{for(var s in n)l(e,s,{get:n[s],enumerable:!0})},i=(e,n,s,t)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let c of N(n))!k.call(e,c)&&c!==s&&l(e,c,{get:()=>n[c],enumerable:!(t=m(n,c))||t.enumerable});return e};var f=(e,n,s)=>(s=e!=null?h(u(e)):{},i(n||!e||!e.__esModule?l(s,\"default\",{value:e,enumerable:!0}):s,e)),x=e=>i(l({},\"__esModule\",{value:!0}),e);var p=g((y,o)=>{o.exports=_jsx_runtime});var I={};v(I,{default:()=>r});var a=f(p());function d(e){let n={a:\"a\",code:\"code\",h2:\"h2\",p:\"p\",pre:\"pre\",span:\"span\",...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(n.h2,{id:\"\\u524D\\u8A00\",children:[(0,a.jsx)(n.a,{href:\"#\\u524D\\u8A00\",\"aria-hidden\":\"true\",tabIndex:\"-1\",children:(0,a.jsx)(n.span,{className:\"icon icon-link\"})}),\"\\u524D\\u8A00\"]}),(0,a.jsxs)(n.p,{children:[\"\\u4F7F\\u7528flex\\u5E03\\u5C40\\u89E3\\u51B3\\u90E8\\u5206\\u6D4F\\u89C8\\u5668\\u4E0B\\uFF0C \",(0,a.jsx)(n.code,{children:\"max-height: 200px\"}),\"\\u4E0E\",(0,a.jsx)(n.code,{children:\"overflow: auto;\"}),\"\\u4F7F\\u7528\\u4E0B\\u4E00\\u76F4\\u51FA\\u73B0\\u6EDA\\u52A8\\u6761\\u7684\\u95EE\\u9898\\u3002\"]}),(0,a.jsxs)(n.h2,{id:\"html\\u4EE3\\u7801\",children:[(0,a.jsx)(n.a,{href:\"#html\\u4EE3\\u7801\",\"aria-hidden\":\"true\",tabIndex:\"-1\",children:(0,a.jsx)(n.span,{className:\"icon icon-link\"})}),\"html\\u4EE3\\u7801\"]}),(0,a.jsx)(n.pre,{className:\"language-html\",children:(0,a.jsxs)(n.code,{className:\"code-highlight language-html\",children:[(0,a.jsxs)(n.span,{className:\"code-line\",children:[(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"<\"}),\"div\"]}),\" \",(0,a.jsx)(n.span,{className:\"token attr-name\",children:\"class\"}),(0,a.jsxs)(n.span,{className:\"token attr-value\",children:[(0,a.jsx)(n.span,{className:\"token punctuation attr-equals\",children:\"=\"}),(0,a.jsx)(n.span,{className:\"token punctuation\",children:'\"'}),\"container\",(0,a.jsx)(n.span,{className:\"token punctuation\",children:'\"'})]}),(0,a.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),`\n`]}),(0,a.jsxs)(n.span,{className:\"code-line\",children:[\" \",(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"<\"}),\"div\"]}),\" \",(0,a.jsx)(n.span,{className:\"token attr-name\",children:\"class\"}),(0,a.jsxs)(n.span,{className:\"token attr-value\",children:[(0,a.jsx)(n.span,{className:\"token punctuation attr-equals\",children:\"=\"}),(0,a.jsx)(n.span,{className:\"token punctuation\",children:'\"'}),\"header\",(0,a.jsx)(n.span,{className:\"token punctuation\",children:'\"'})]}),(0,a.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),\"Header without specific height. Always stays at top of .container, even if it is so long it uses up two lines.\",(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"\"})]}),`\n`]}),(0,a.jsxs)(n.span,{className:\"code-line\",children:[\" \",(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"<\"}),\"div\"]}),\" \",(0,a.jsx)(n.span,{className:\"token attr-name\",children:\"class\"}),(0,a.jsxs)(n.span,{className:\"token attr-value\",children:[(0,a.jsx)(n.span,{className:\"token punctuation attr-equals\",children:\"=\"}),(0,a.jsx)(n.span,{className:\"token punctuation\",children:'\"'}),\"content\",(0,a.jsx)(n.span,{className:\"token punctuation\",children:'\"'})]}),(0,a.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),`\n`]}),(0,a.jsxs)(n.span,{className:\"code-line\",children:[\" \",(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"<\"}),\"div\"]}),(0,a.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),\"Item no 1 in long list\",(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"\"})]}),`\n`]}),(0,a.jsxs)(n.span,{className:\"code-line\",children:[\" \",(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"<\"}),\"div\"]}),(0,a.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),\"Item no 2 in long list\",(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"\"})]}),`\n`]}),(0,a.jsxs)(n.span,{className:\"code-line\",children:[\" \",(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"<\"}),\"div\"]}),(0,a.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),\"Item no 3 in long list\",(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"\"})]}),`\n`]}),(0,a.jsxs)(n.span,{className:\"code-line\",children:[\" \",(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"<\"}),\"div\"]}),(0,a.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),\"Item no 4 in long list\",(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"\"})]}),`\n`]}),(0,a.jsxs)(n.span,{className:\"code-line\",children:[\" \",(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"<\"}),\"div\"]}),(0,a.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),\"Item no 5 in long list\",(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"\"})]}),`\n`]}),(0,a.jsxs)(n.span,{className:\"code-line\",children:[\" \",(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"<\"}),\"div\"]}),(0,a.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),\"Item no 6 in long list\",(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"\"})]}),`\n`]}),(0,a.jsxs)(n.span,{className:\"code-line\",children:[\" \",(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"<\"}),\"div\"]}),(0,a.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),\"Item no 7 in long list\",(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"\"})]}),`\n`]}),(0,a.jsxs)(n.span,{className:\"code-line\",children:[\" \",(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"<\"}),\"div\"]}),(0,a.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),\"Item no 8 in long list\",(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"\"})]}),`\n`]}),(0,a.jsxs)(n.span,{className:\"code-line\",children:[\" \",(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"<\"}),\"div\"]}),(0,a.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),\"Item no 9 in long list\",(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"\"})]}),`\n`]}),(0,a.jsxs)(n.span,{className:\"code-line\",children:[\" \",(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"<\"}),\"div\"]}),(0,a.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),\"Item no 10 in long list\",(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"\"})]}),`\n`]}),(0,a.jsxs)(n.span,{className:\"code-line\",children:[\" \",(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"<\"}),\"div\"]}),(0,a.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),\"Item no 11 in long list\",(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"\"})]}),`\n`]}),(0,a.jsxs)(n.span,{className:\"code-line\",children:[\" \",(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"<\"}),\"div\"]}),(0,a.jsx)(n.span,{className:\"token punctuation\",children:\">\"})]}),\"Item no 12 in long list\",(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"\"})]}),`\n`]}),(0,a.jsxs)(n.span,{className:\"code-line\",children:[\" \",(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"\"})]}),`\n`]}),(0,a.jsxs)(n.span,{className:\"code-line\",children:[(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsxs)(n.span,{className:\"token tag\",children:[(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"\"})]}),`\n`]})]})}),(0,a.jsxs)(n.h2,{id:\"css\",children:[(0,a.jsx)(n.a,{href:\"#css\",\"aria-hidden\":\"true\",tabIndex:\"-1\",children:(0,a.jsx)(n.span,{className:\"icon icon-link\"})}),\"css\"]}),(0,a.jsx)(n.pre,{className:\"language-css\",children:(0,a.jsxs)(n.code,{className:\"code-highlight language-css\",children:[(0,a.jsxs)(n.span,{className:\"code-line\",children:[(0,a.jsx)(n.span,{className:\"token selector\",children:(0,a.jsx)(n.span,{className:\"token class\",children:\".container\"})}),\" \",(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"{\"}),`\n`]}),(0,a.jsxs)(n.span,{className:\"code-line\",children:[\" \",(0,a.jsx)(n.span,{className:\"token property\",children:\"display\"}),(0,a.jsx)(n.span,{className:\"token punctuation\",children:\":\"}),\" flex\",(0,a.jsx)(n.span,{className:\"token punctuation\",children:\";\"}),`\n`]}),(0,a.jsxs)(n.span,{className:\"code-line\",children:[\" \",(0,a.jsx)(n.span,{className:\"token property\",children:\"max-height\"}),(0,a.jsx)(n.span,{className:\"token punctuation\",children:\":\"}),\" \",(0,a.jsx)(n.span,{className:\"token number\",children:\"100\"}),(0,a.jsx)(n.span,{className:\"token unit\",children:\"px\"}),(0,a.jsx)(n.span,{className:\"token punctuation\",children:\";\"}),`\n`]}),(0,a.jsxs)(n.span,{className:\"code-line\",children:[\" \",(0,a.jsx)(n.span,{className:\"token property\",children:\"flex-direction\"}),(0,a.jsx)(n.span,{className:\"token punctuation\",children:\":\"}),\" column\",(0,a.jsx)(n.span,{className:\"token punctuation\",children:\";\"}),`\n`]}),(0,a.jsxs)(n.span,{className:\"code-line\",children:[\" \",(0,a.jsx)(n.span,{className:\"token property\",children:\"border\"}),(0,a.jsx)(n.span,{className:\"token punctuation\",children:\":\"}),\" \",(0,a.jsx)(n.span,{className:\"token number\",children:\"1\"}),(0,a.jsx)(n.span,{className:\"token unit\",children:\"px\"}),\" solid \",(0,a.jsx)(n.span,{className:\"token color\",children:\"red\"}),(0,a.jsx)(n.span,{className:\"token punctuation\",children:\";\"}),`\n`]}),(0,a.jsxs)(n.span,{className:\"code-line\",children:[(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"}\"}),`\n`]}),(0,a.jsxs)(n.span,{className:\"code-line\",children:[(0,a.jsx)(n.span,{className:\"token selector\",children:(0,a.jsx)(n.span,{className:\"token class\",children:\".header\"})}),\" \",(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"{\"}),`\n`]}),(0,a.jsxs)(n.span,{className:\"code-line\",children:[\" \",(0,a.jsx)(n.span,{className:\"token property\",children:\"background\"}),(0,a.jsx)(n.span,{className:\"token punctuation\",children:\":\"}),\" \",(0,a.jsx)(n.span,{className:\"token color hexcode\",children:\"#eee\"}),(0,a.jsx)(n.span,{className:\"token punctuation\",children:\";\"}),`\n`]}),(0,a.jsxs)(n.span,{className:\"code-line\",children:[(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"}\"}),`\n`]}),(0,a.jsx)(n.span,{className:\"code-line\",children:`\n`}),(0,a.jsxs)(n.span,{className:\"code-line\",children:[(0,a.jsxs)(n.span,{className:\"token selector\",children:[(0,a.jsx)(n.span,{className:\"token class\",children:\".container\"}),\" \",(0,a.jsx)(n.span,{className:\"token combinator\",children:\">\"}),\" div\"]}),\" \",(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"{\"}),`\n`]}),(0,a.jsxs)(n.span,{className:\"code-line\",children:[\" \",(0,a.jsx)(n.span,{className:\"token property\",children:\"flex\"}),(0,a.jsx)(n.span,{className:\"token punctuation\",children:\":\"}),\" \",(0,a.jsx)(n.span,{className:\"token number\",children:\"0\"}),\" \",(0,a.jsx)(n.span,{className:\"token number\",children:\"0\"}),\" auto\",(0,a.jsx)(n.span,{className:\"token punctuation\",children:\";\"}),`\n`]}),(0,a.jsxs)(n.span,{className:\"code-line\",children:[(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"}\"}),`\n`]}),(0,a.jsxs)(n.span,{className:\"code-line\",children:[(0,a.jsxs)(n.span,{className:\"token selector\",children:[(0,a.jsx)(n.span,{className:\"token class\",children:\".container\"}),\" \",(0,a.jsx)(n.span,{className:\"token combinator\",children:\">\"}),\" div\",(0,a.jsx)(n.span,{className:\"token class\",children:\".content\"})]}),\" \",(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"{\"}),`\n`]}),(0,a.jsxs)(n.span,{className:\"code-line\",children:[\" \",(0,a.jsx)(n.span,{className:\"token property\",children:\"flex\"}),(0,a.jsx)(n.span,{className:\"token punctuation\",children:\":\"}),\" \",(0,a.jsx)(n.span,{className:\"token number\",children:\"0\"}),\" \",(0,a.jsx)(n.span,{className:\"token number\",children:\"1\"}),\" auto\",(0,a.jsx)(n.span,{className:\"token punctuation\",children:\";\"}),`\n`]}),(0,a.jsxs)(n.span,{className:\"code-line\",children:[\" \",(0,a.jsx)(n.span,{className:\"token property\",children:\"overflow\"}),(0,a.jsx)(n.span,{className:\"token punctuation\",children:\":\"}),\" auto\",(0,a.jsx)(n.span,{className:\"token punctuation\",children:\";\"}),`\n`]}),(0,a.jsxs)(n.span,{className:\"code-line\",children:[(0,a.jsx)(n.span,{className:\"token punctuation\",children:\"}\"}),`\n`]})]})}),(0,a.jsxs)(n.h2,{id:\"\\u53C2\\u8003\\u8D44\\u6599\",children:[(0,a.jsx)(n.a,{href:\"#\\u53C2\\u8003\\u8D44\\u6599\",\"aria-hidden\":\"true\",tabIndex:\"-1\",children:(0,a.jsx)(n.span,{className:\"icon icon-link\"})}),\"\\u53C2\\u8003\\u8D44\\u6599\"]}),(0,a.jsx)(n.p,{children:(0,a.jsx)(n.a,{href:\"https://stackoverflow.com/questions/36982056/maxheight-on-parent-and-overflow-y-scroll-on-one-of-its-children\",children:\"https://stackoverflow.com/questions/36982056/maxheight-on-parent-and-overflow-y-scroll-on-one-of-its-children\"})})]})}function r(e={}){let{wrapper:n}=e.components||{};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(d,{...e})}):d(e)}return x(I);})();\n;return Component;","toc",[54,61,64,66],{"_55":56,"_57":58,"_59":60},"value","前言","url","#前言","depth",2,{"_55":62,"_57":63,"_59":60},"html代码","#html代码",{"_55":46,"_57":65,"_59":60},"#css",{"_55":67,"_57":68,"_59":60},"参考资料","#参考资料","readTime",{"_71":72,"_73":74,"_75":76,"_77":78},"text","2 min read","minutes",1.22,"time",73200,"words",244,"frontmatter",{"_10":81,"_82":83,"_84":85,"_87":88},"使用flex布局解决部分浏览器下max-height一直出现滚动条","date","2021-03-17T00:00:00.000Z","tags",[46,86],"flex","summary","使用flex布局解决部分浏览器下， max-height: 200px与overflow: auto;使用下一直出现滚动条的问题。","slug","2021-03-17-flex-overflow-scroll","actionData","errors"]

标签：css

使用flex布局解决部分浏览器下max-height一直出现滚动条