为什么我的flexbox的内容溢出了父母?在我的示例中-
https://jsfiddle.net/zbvrL401/请垂直调整浏览器的大小。列表的内容在页面上方和上方。
我希望内容不会超出页面顶部。
我该如何预防?
HTML:
<div class="container">
<ul>
<li>list item one</li>
<li>list item two</li>
<li>list item three</li>
<li>list item four</li>
<li>list item five</li>
</ul>
</div>
CSS:
.container {
background: gold;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
ul{
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
li {
font-size: 3em;
}
最佳答案
已更新(感谢DHolbert)
如果项目的大小大于容器的大小,则space-around
的行为类似于center
,在顶部/底部均发生相同的溢出。
Src:https://drafts.csswg.org/css-flexbox-1/#valdef-justify-content-space-around
一种解决方案是将container
设置为flex容器,将其align-items
设置为flex-start
,然后将height
上的min-height
更改为ul
。
此外,在overflow: auto
上设置continer
将使其正确滚动,并且由于ul
成为弹性行项目,因此需要宽度。
.container {
background: gold;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex; /* added */
align-items: flex-start; /* added */
overflow: auto; /* added */
}
ul{
width: 100%; /* added */
min-height: 100%; /* changed */
display: flex;
flex-direction: column;
justify-content: space-around;
margin: 0; /* added */
}
li {
font-size: 3em;
}
<div class="container">
<ul>
<li>list item one</li>
<li>list item two</li>
<li>list item three</li>
<li>list item four</li>
<li>list item five</li>
</ul>
</div>
关于html - Flex内容溢出容器,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46542201/