Flex项目在Safari中溢出容器 [英] Flex items overflowing container in Safari

问题描述

以下是Chrome和Firefox中布局的样子：

由于某些原因，flex项目不在Safari的容器内。

$ b

这是我的代码：

< div id =div1 > < div id =div2>测试< / div> < div id =div3> test2< / div>< / div>

你有一个容器，其中 height：600px


$ b

这个容器有两个子元素：



• 子元素 height：200px 。


• 另一个子元素为 height：100％

由于百分比高度是基于父级的高度，因此您要将第二个孩子的高度设置为等于完整

10.5内容高度： height 属性

百分比

指定百分比高度。这个百分比是根据生成的包含块的高度来计算的。

结果发生溢出：

 （200px + 600px）> 600px 
  

除了，在flex容器中，初始设置是 code> 。这意味着flex项目可以缩小以适应容器内部。 Chrome和Firefox正确应用此设置，允许 height：100％的元素收缩以适应。 Safari显然有不同的解释。

---

解决方案

您可以使用 calc（） 来解决问题：


 ＃div3 {
高度：calc（100％ -  200px）; 
 
 
 
 $ b 
 
 
 <重写> ＃div1 {background：black;宽度：250px; height：600px;显示：flex; flex-direction：column; padding-bottom：5px}＃div2 {background：pink;颜色：#FFF; width：240px; height：200px}＃div3 {background：blue;颜色：#FFF; width：240px; height：calc（100％ -  200px）;}  

< ; div id =div1> < div id =div2>测试< / div> < div id =div3> test2< / div>< / div>

但是，由于您已经在列方向flex容器中工作，因此您可以使用 flex 来使第二个孩子消耗剩余的空间： / p>



 ＃div3 {
 flex：1; 
 
 
 
 $ b $ p 
 $ b 
这意味着：其他兄弟没有用过的空间将会是 
 
 $ b  
 
 
 ＃ div1 {background：black;宽度：250px; height：600px;显示：flex; flex-direction：column; padding-bottom：5px}＃div2 {background：pink;颜色：#FFF; width：240px; height：200px}＃div3 {background：blue;颜色：#FFF; width：240px; flex：1;}  

< div id =div1 > < div id =div2>测试< / div> < div id =div3> test2< / div>< / div>

For some reason, flex items are not staying inside the container in Safari.

Here's what the layout looks like in Chrome and Firefox:

Here's what it looks like in Safari:

Here's my code:

#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>

解决方案

The Problem

You have a container with height: 600px.

This container has two children:

• One child has height: 200px.
• The other child has height: 100%.

Since percentage heights are based on the height of the parent, you are setting the height of the second child to equal the full height of the container.

10.5 Content height: the height property

percentage

Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block.

As a result, an overflow occurs:

(200px + 600px) > 600px

Except that in a flex container, an initial setting is flex-shrink: 1. This means that flex items can shrink in order to fit inside the container. Chrome and Firefox apply this setting correctly, allowing the element with height: 100% to shrink to fit. Safari, apparently, has a different interpretation.

---

Solutions

You could use calc() to solve the problem:

#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>

However, since you're already working in a column-direction flex container, you can use flex to make the second child consume remaining space:

#div3 {
  flex: 1;
}

This means: Any space not used up by other siblings will be consumed by this child.

#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项目在Safari中溢出容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！