[英]Safari flexbox: child of flex container with height:100% overflows when it has a grandchild with height:100%
我这里有这段代码,它在 Safari 中的行为与在 Chrome 和 Firefox 中的行为不同,为什么?
.parent { height: 150px; display: flex; flex-direction: column; background: salmon; border: 2px solid black; } .child1 { background: red; } .child2 { background: grey; height: 100%; } .grandchild2 { height: 100%; background: blue; }
<div class="parent"> <div class="child1"> child 1 </div> <div class="child2"> <div class="grandchild2"> </div> </div> </div>
我不明白为什么存在grandchild2
品牌child2
具有相同高度parent
。 这是一个已知的 Safari 错误吗?
如果我删除grandchild2
, child2
不会溢出。
有没有办法让 Safari 表现得像 Chrome 和 Firefox?
尝试从 child2 中删除高度并使用 flex-grow: 1
使child2
成为一个 flex 容器似乎会带来我期望的行为。
.parent { height: 150px; display: flex; flex-direction: column; background: salmon; border: 2px solid black; } .child1 { background: red; } .child2 { background: grey; flex-grow: 1; /* <---- added that */ display: flex; /* <---- added that */ flex-direction: column; /* <---- added that */ } .grandchild2 { flex-grow: 1; /* <---- added that */ background: blue; }
<div class="parent"> <div class="child1"> child 1 </div> <div class="child2"> <div class="grandchild2"> </div> </div> </div>
阅读此线程后: Chrome / Safari not Filling 100% height of flex parent
似乎我必须一直使用 flex 而不是混合height: 100%
和flex-grow:1
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.