[英]How do I get a child of a flex-grow div to have height 100%
在下面的示例中，我希望innerContent div 是内容 div 的整个高度，但它不是：（ plunker 链接）
.shell{ height: 100%; display: flex; flex-direction: column; background-color: green; } .content{ background-color: red; flex-grow: 1; } .innerContent{ background-color: blue; height: 100%; } html, body { height: 100%; padding: 0; margin: 0; }
<body> <div class="shell"> <div class="header"> <h1>Hello Plunker!</h1> </div> <div class="content"> <div class="innerContent"> Content </div> </div> <div class="footer"> Footer </div> </div> </body>预期行为是内部内容（蓝色）与内容区域（红色）高度相同。 对我来说，我得到了这个：
这可以通过更改flex-grow: 1;在 chrome 71 上修复flex-grow: 1; flex: 1; .
似乎这是 Chrome 的错误。 chrome 中 Flexbox 的行为在 chrome 71 和 72 版本之间发生了变化。
在 chrome 72 中，我得到了预期的行为：
如何在具有 flex-grow:1 的 flex 项目的子项上设置 height:100%？
[英]How can I set height:100% on child of flex item that has flex-grow:1?
身高 100% 的 Flex-grow 孩子在 Safari 中的高度为零
[英]Flex-grow child with height 100% has a zero height in Safari
div 设置为高度 100%，使用 scroll-y: hidden，但是我如何让子 div 具有可滚动性？
[英]Div is set to height 100% with scroll-y: hidden, BUT how do i get a child div to have scrollable?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.