我怎样才能进一步推动我的列包裹固定高度答案

【问题标题】：How can I push my columns wrap fixed height further我怎样才能进一步推动我的列包裹固定高度
【发布时间】：2021-01-15 18:02:32
【问题描述】：

您好，感谢您点击这个问题，

我使用 flex 和 wrap 制作了一个固定高度的列，并且父 div 的宽度将如下所示。（父 div 停在 body 的末尾？）

目前列在我的父 div 之外

我的代码中缺少什么？我敢肯定这很简单：/

<style>ul#list {
font-family: sans-serif;
list-style: none;
background: #dddddd;
height: 200px;
width: auto;
position: relative;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: column wrap;
flex-flow: column wrap;  
border: 8px solid #121212;
padding: 10px;
}

li {
position: relative;
display: block;
width:300px;
color: #232323;
background: #eee;
padding: 6px 10px;
margin: 4px;
border: 1px dotted #121212;
border-radius: 10px;
}</style>

<div id="outer">
<ul id="list">
    <li>Item #1</li>
    <li>Item #2</li>
    <li>Item #3</li>
    <li>Item #4</li>
    <li>Item #5</li>
    <li>Item #6</li>
    <li>Item #7</li>
    <li>Item #8</li>
    <li>Item #9</li>
    <li>Item #10</li>
    <li>Item #11</li>
    <li>Item #12</li>        
    <li>Item #13</li>
    <li>Item #14</li>
    <li>Item #15</li>
    <li>Item #16</li>
    <li>Item #17</li>
    <li>Item #18</li>
    <li>Item #19</li>
    <li>Item #20</li>
    <li>Item #21</li>
    <li>Item #22</li>
    <li>Item #23</li>
    <li>Item #24</li>
    <li>Item #25</li>
    <li>Item #26</li>
    <li>Item #27</li>
    <li>Item #28</li>
    <li>Item #29</li>
    <li>Item #30</li>
    <li>Item #31</li>
    <li>Item #32</li>      
</ul>
</div>

非常感谢

【问题讨论】：

标签： css flexbox multiple-columns

【解决方案1】：

不确定我是否理解你的问题，我明白了，你想隐藏与父 div 重叠的所有内容？

如果是这样，请在您的父 div 上添加以下 css 属性：

overflow-x: hidden;

这样，您父 div 之外的所有内容都将被隐藏。请记住，黑色边框仍将位于您的子项后面。

【讨论】：

谢谢，hoargarth，正好相反，我想要父 div 跟随 li 溢出:)

【解决方案2】：

你需要根据你的父母'ul'宽度给出'li'的宽度

【讨论】：

感谢 Yash 的第一条评论，我会反过来，让 ul 跟随 li 溢出

【解决方案3】：

我的问题在这里已经有了答案：

When flexbox items wrap in column mode, container does not grow its width

这似乎是一个反复出现的问题

【讨论】：