使用CSS将溢出列表继续到父

Question

基本上我有一个父容器<div>，然后我在那里使用display: flex;flex-direction:column;flex-wrap:wrap;对齐的子元素。到目前为止，所需的布局是容器具有固定的高度，并且随着越来越多的内容被添加到子元素中，将向右滚动。

所有子元素都有一个固定的宽度，并从左上角开始堆叠到列中，然后从右上到下排列下一行。

到目前为止，我所有这些工作正常，我的问题是......

如果其中一个子元素是<ul>，那么现在这个新列表中的<li>会溢出其父元素。会发生什么是<ul>会增加高度，然后会移到下一列。我不希望这种情况发生。我希望<ul>能够在通常不会溢出的情况下开始，然后以某种方式我正在寻找一种让孩子<li>元素移动到列表的下一行的方法＆ ＃39;容器一直在顶部像我在MS Paint中绘制的图像 - 不是最好的视觉辅助 - 抱歉

我还尝试重新创建stripped down version in a fiddle right here

这是来自小提琴的代码，它创建了一个非常基本的容器，带来了孩子，显示出问题＆＃34;或者我应该说当前正在发生的不理想的结果

<div class="container">
  <div class="child"> </div>
  <p class="text child"> </p>
  <ul class="list">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
    <li>uno</li>
    <li>doce</li>
    <li>tries</li>
    <li>quatro</li>
    <li>sinco</li>
    <li>siete</li>
    <li>ocho</li>
    <li>nueve</li>
    <li>doce</li>
    <li>tries</li>
    <li>quatro</li>
    <li>sinco</li>
    <li>siete</li>
    <li>ocho</li>
    <li>nueve</li>
  </ul>
</div>

和CSS

.container{border:2px solid blue; width:1000px; height:350px; display:flex; 
       flex-direction:column;flex-wrap:wrap; position:relative;padding:3px;} 

.text{ height:75px;width:200px;border:2px dotted red;display:inline-block; }

.list{flex-wrap:wrap;flex-direction:column;display:flex;width:165px;height:75px;
   border:2 px dashed purple;}

.list li{;flew-wrap:wrap;display:flex;width:200px}

.container div{height:100px;width:200px;border:2px dotted green;display:inline-block;}

Answer 1

尝试使用columns / -webkit-columns ：

.container [
    columns: 3;
    -webkit-columns: 3;
}

Updated fiddle