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

Question

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

我用 flex 和 wrap 制作了一个固定高度的列，并且父 div 具有以下宽度。（父div停在正文末尾？）

目前这些列超出了我的父 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>

非常感谢

Answer 1

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

如果是，请在您的 parent div 添加以下 css 属性:

overflow-x: hidden;

这样，您 parent div 之外的所有内容都将被隐藏。请记住，黑色边框仍会出现在您的 child 项之后。

Answer 2

你需要根据你的 parent 'ul' 宽度

给出 'li' 的宽度

Answer 3

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

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

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

How can I push my columns wrap fixed height further

css

multiple-columns

flexbox