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>
你有一个容器,其中 这个容器有两个子元素: 由于百分比高度是基于父级的高度,因此您要将第二个孩子的高度设置为等于完整 百分比 指定百分比高度。这个百分比是根据生成的包含块的高度来计算的。 结果发生溢出: 您可以使用 但是,由于您已经在列方向flex容器中工作,因此您可以使用 这意味着:其他兄弟没有用过的空间将会是 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:
You have a container with This container has two children: 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 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: Except that in a flex container, an initial setting is You could use
However, since you're already working in a column-direction flex container, you can use This means: Any space not used up by other siblings will be consumed by this child.
这篇关于Flex项目在Safari中溢出容器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋! height:600px
$ b
height:200px
。
height:100%
(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
来使第二个孩子消耗剩余的空间: / 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>
#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
height: 600px
.
height: 200px
.height: 100%
.
height
property(200px + 600px) > 600px
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
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>
flex
to make the second child consume remaining space:#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>