[英]Flex items overflowing container in Safari
For some reason, flex items are not staying inside the container in Safari. 由于某些原因,弹性项目不会留在Safari的容器内。
Here's what the layout looks like in Chrome and Firefox: 这是Chrome和Firefox中的布局外观:
Here's what it looks like in Safari: 这是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>
You have a container with height: 600px
. 您有一个height: 600px
的容器。
This container has two children: 这个容器有两个孩子:
height: 200px
. 一个孩子的height: 200px
。 height: 100%
. 另一个孩子的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 10.5内容高度:height
属性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
. 除了在flex容器中之外,初始设置为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. Chrome和Firefox正确应用了此设置,允许height: 100%
的元素缩小以适合。 Safari, apparently, has a different interpretation. Safari显然有不同的解释。
You could use calc()
to solve the problem: 您可以使用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>
However, since you're already working in a column-direction flex container, you can use flex
to make the second child consume remaining space: 但是,由于您已经在列方向的flex容器中工作,因此可以使用flex
来使第二个子元素消耗剩余空间:
#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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.