带有滚动区域的嵌套式柔性盒 [英] Nested flexbox with scrolling area
问题描述
我试图在最新的Chrome，Firefox和IE11中实现这种布局：
我可以通过以下方式获得此功能：
< data-lang =falsedata-console =false>
html {box-sizing：border-box;} *，*：before，*：after {box- sizing：inherit;} html，body {height：100％;填充：0;保证金：0; } p {line-height：2em; }页眉，页脚，文章{padding：10px; } #parent {height：100％;显示：flex; flex-flow：立柱; background-color：limegreen;}＃parent> header {flex：none; background-color：limegreen;}＃parent> footer {flex：none;}＃child {display：flex; flex-direction：column;背景颜色：红色;身高：100％ min-height：0;}＃child> header {flex：none; background-color：#aaa;}＃child>文章{flex：1 1 auto;溢出-y：auto; min-height：0px;}＃child>页脚{flex：none; background-color：#aaa;}
< section id = 父 > < header> Parent flex header< / header> < section id =child> < header> Child flex header< / header> <物品> < p>很多内容。< / p> < p>很多内容。< / p> < p>很多内容。< / p> < p>很多内容。< / p> < p>很多内容。< / p> < p>很多内容。< / p> < p>很多内容。< / p> < p>很多内容。< / p> < p>很多内容。< / p> < p>很多内容。< / p> < p>很多内容。< / p> < p>很多内容。< / p> < p>很多内容。< / p> < p>很多内容。< / p> < p>很多内容。< / p> < p>很多内容。< / p> < p>很多内容。< / p> < p>很多内容。< / p> < p>很多内容。< / p> < p>很多内容。< / p> < p>很多内容。< / p> < p>很多内容。< / p> < p>很多内容。< / p> < p>很多内容。< / p> < p>很多内容。< / p> < p>很多内容。< / p> < p>很多内容。< / p> < p>很多内容。< / p> < p>很多内容。< / p> < p>很多内容。< / p> < p>很多内容。< / p> < p>很多内容。< / p> < p>很多内容。< / p> < /冠词GT; < footer> Child flex footer< / footer> < /节> < footer> Parent flex footer< / footer>< / section>
然而一些CSS我觉得有点奇怪，我想确保我有最大的机会不会产生会在浏览器更新中断的CSS。这样做的原因是，软件将运行在实际的硬件（有点像你的路由器管理界面），不能像一个普通的网站一样简单地更新。
这种麻烦的CSS是可滚动文章：
#child {
display：flex;
flex-direction：column;
background-color：red;
身高：100％;
min-height：0;
}
我用 height 和 min-height ，以使其在所有三个工作。最初我只有 height：100％，但在Firefox中不起作用。指定 min-height：0 可以在Chrome和FF中使用，但不能在IE中使用。这个组合似乎满足所有3个，但是谁是正确的？我可以合理确信，这将不会在下一个FF或铬打破？这个代码从spec-perspective是否有意义？
默认情况下，flex项目不会缩小到最小内容大小（最长字或固定大小元素的长度）以下。为了改变这种情况，设置最小宽度或最小高度属性。
所以只要设置 min-您是否允许您的< article> 实际使用 flex-shrink >和适合父Flex容器。
如果我正确地看到这个问题，您看到与IE浏览器的问题匹配的bug 这里描述了并确认了： 这可能（或可能不）包含有关溢出的问题。 > I'm trying to achieve this layout in the latest Chrome, Firefox and IE11: I can get this working with the following:
However some of the CSS I find a bit strange and I want to make sure that I have the most chance to not produce CSS that will break in some browser update. The reason for this is that the software will run on actual hardware (kind of like your router admin interface) and cannot be updated as easily as a regular website. So the CSS that kind of troubles me is the scrollable I fiddled around with the Setting By default, flex items won’t shrink below their minimum content size (the length of the longest word or fixed-size element). To change this, set the min-width or min-height property. So only by setting If I see this correctly, the issue you see with IE matches the bug described here and acknowledged here: In IE 10-11, min-height declarations on flex containers in the column direction work to size the containers themselves, but their flex item children do not seem to know the size of their parents. They act as if no height has been set at all. This might (or might not) encompass issues regarding overflow. 这篇关于带有滚动区域的嵌套式柔性盒的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
lock
在IE 10-11中，flex容器中的min-height声明列方向的工作，以容器本身的大小，但他们的弹性项目的孩子似乎并不知道他们的父母的大小。他们的行为就好像没有设置高度。
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html, body { height: 100%; padding: 0; margin: 0; }
p { line-height: 2em; }
header, footer, article { padding: 10px; }
#parent {
height: 100%;
display: flex;
flex-flow: column nowrap;
background-color: limegreen;
}
#parent > header {
flex: none;
background-color: limegreen;
}
#parent > footer {
flex: none;
}
#child {
display: flex;
flex-direction: column;
background-color: red;
height: 100%;
min-height: 0;
}
#child > header {
flex: none;
background-color: #aaa;
}
#child > article {
flex: 1 1 auto;
overflow-y: auto;
min-height: 0px;
}
#child > footer {
flex: none;
background-color: #aaa;
}<section id="parent">
<header>Parent flex header </header>
<section id="child" >
<header>Child flex header</header>
<article>
<p>Lots of content.</p>
<p>Lots of content.</p>
<p>Lots of content.</p>
<p>Lots of content.</p>
<p>Lots of content.</p>
<p>Lots of content.</p>
<p>Lots of content.</p>
<p>Lots of content.</p>
<p>Lots of content.</p>
<p>Lots of content.</p>
<p>Lots of content.</p>
<p>Lots of content.</p>
<p>Lots of content.</p>
<p>Lots of content.</p>
<p>Lots of content.</p>
<p>Lots of content.</p>
<p>Lots of content.</p>
<p>Lots of content.</p>
<p>Lots of content.</p>
<p>Lots of content.</p>
<p>Lots of content.</p>
<p>Lots of content.</p>
<p>Lots of content.</p>
<p>Lots of content.</p>
<p>Lots of content.</p>
<p>Lots of content.</p>
<p>Lots of content.</p>
<p>Lots of content.</p>
<p>Lots of content.</p>
<p>Lots of content.</p>
<p>Lots of content.</p>
<p>Lots of content.</p>
<p>Lots of content.</p>
</article>
<footer>Child flex footer</footer>
</section>
<footer>Parent flex footer</footer>
</section>article:#child {
display: flex;
flex-direction: column;
background-color: red;
height: 100%;
min-height: 0;
}
height and min-height to make it work in all three. Originally I had height: 100% only, but that didn't work in Firefox. Specifying min-height: 0 would work in Chrome and FF, but not in IE. The combination seemed to satisfy all 3, but who is correct? Can I be reasonably sure that this wont break in the next FF or Chrome? Does this code make sense from a 'spec-perspective'?min-height is indeed required, and the correct way to achieve the desired layout. From the spec:
min-height do you allow your your <article> to actually make use of flex-shrink and fit into the parent flex container.
