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

10-11 12:54
查看更多