[英]Safari flexbox: child of flex container with height:100% overflows when it has a grandchild with height:100%
I have this code here and it behaves differently in Safari than in Chrome and Firefox, why?我这里有这段代码,它在 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>
I don't understand why the presence of grandchild2
makes child2
to have the same height as parent
.我不明白为什么存在grandchild2
品牌child2
具有相同高度parent
。 Is this a known Safari bug?这是一个已知的 Safari 错误吗?
If I remove grandchild2
, child2
doesn't overflow.如果我删除grandchild2
, child2
不会溢出。
Is there a workaround to make Safari behave like Chrome and Firefox?有没有办法让 Safari 表现得像 Chrome 和 Firefox?
尝试从 child2 中删除高度并使用 flex-grow: 1
Making child2
a flex container seems to make bring the behaviour that I expect.使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>
After reading this thread: Chrome / Safari not filling 100% height of flex parent阅读此线程后: Chrome / Safari not Filling 100% height of flex parent
It seems that I have to use flex all the way through and not mix height: 100%
and flex-grow:1
.似乎我必须一直使用 flex 而不是混合height: 100%
和flex-grow:1
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.