Question

为什么我的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;
}

Answer 1

更新（感谢DHolbert）

如果商品尺寸大于容器，space-around的行为类似于center，它在顶部/底部均匀溢出。

Src：https://drafts.csswg.org/css-flexbox-1/#valdef-justify-content-space-around

一种解决方案是将container设为灵活容器，将其设置为align-items至flex-start，并将height更改为min-height ul 1}}。

此外，在overflow: auto上设置continer会使其正确滚动，并且由于ul成为弹性行项目，因此需要宽度。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

我认为这是因为父div位于绝对位置，因此在滚动之前它只占用可见空间。 ul列表的高度超过了父级的高度。

如果你移除绝对位置，它不会溢出金色背景颜色。

Answer 3

.container {
    background: gold;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display:inline-table;
}

Flex内容溢出容器

3 个答案: