Flex的项目在Safari溢出容器(Flex items overflowing containe

出于某种原因，柔性项目不停留在Safari中的容器内。

这里的布局看起来像在Chrome和Firefox：

下面是它看起来像在Safari中：

这里是我的代码：

 #div1 { background: black; width: 250px; height: 600px; display: flex; flex-direction: column; padding-bottom: 5px } #div2 { background: pink; color: #FFF; width: 240px; height: 200px } #div3 { background: blue; color: #FFF; width: 240px; height: 100%; position: relative } 

 <div id="div1"> <div id="div2">test</div> <div id="div3">test2</div> </div> 

Answer 1:

问题

你有一个容器height: 600px 。

该容器有两个孩子：

• 一个孩子有height: 200px 。
• 其他孩子有height: 100%

由于百分比高度是基于父的高度，你设置的第二个孩子的高度等于容器的整个高度。

10.5内容的高度：在height属性

百分比

指定一个百分比高度。 百分率的计算相对于所生成的框的包含块的高度。

其结果是，发生溢出：

(200px + 600px) > 600px

除了在柔性容器中，初始设定是flex-shrink: 1 。 这意味着，柔性项目可以以适合容器内的收缩。 Chrome和Firefox正确地应用此设置，允许与元素height: 100%缩小到适合。 Safari浏览器，显然，有着不同的解读。

---

解决方案

你可以使用calc()来解决问题：

#div3 {
  height: calc(100% - 200px);
}

 #div1 { background: black; width: 250px; height: 600px; display: flex; flex-direction: column; padding-bottom: 5px } #div2 { background: pink; color: #FFF; width: 240px; height: 200px } #div3 { background: blue; color: #FFF; width: 240px; height: calc(100% - 200px); } 

 <div id="div1"> <div id="div2">test</div> <div id="div3">test2</div> </div> 

但是，因为你已经在列向柔性容器时，您可以使用flex ，使第二个孩子消耗剩余空间：

#div3 {
  flex: 1;
}

这意味着： 不被其他兄弟姐妹用完了所有空间，将这个孩子食用。

 #div1 { background: black; width: 250px; height: 600px; display: flex; flex-direction: column; padding-bottom: 5px } #div2 { background: pink; color: #FFF; width: 240px; height: 200px } #div3 { background: blue; color: #FFF; width: 240px; flex: 1; } 

 <div id="div1"> <div id="div2">test</div> <div id="div3">test2</div> </div> 

文章来源: Flex items overflowing container in Safari