column-fill：auto;没有高度溢出div

Question

我在容器中有一个容器，其中有多个ul标签，其中应该分为4列。应该从左到右填充。在Chrome和其他所有内容甚至在我的iPad上的Firefox上，这都可以在高度属性中设置像素数量。但是在我的桌面Firefox上，当高度设置为auto时，内容会溢出。

.parent {height: 700px;}
.child {column-count: 4;column-fill: auto;height: auto;}
ul {break-inside: avoid; page-break-inside: avoid;}

<div class="parent">
      <div class="child">
        <ul>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
        </ul>
            <ul>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
        </ul>
            <ul>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
        </ul>
            <ul>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
        </ul>
            <ul>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
        </ul>
            <ul>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
        </ul>
            <ul>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
        </ul>
      </div>
    </div>

然后，子容器溢出父容器，不会分成4列。

Answer 1

只需删除column-fill: auto;：

（注意：我将margin-top: 0;添加到第一个ul以改进整个容器中列的布局/分布）。

.parent {
  height: 700px;
}

.child {
  column-count: 4;
  height: auto;
}

ul {
  break-inside: avoid;
  page-break-inside: avoid;
}

ul:first-of-type {
  margin-top: 0;
}

<div class="parent">
  <div class="child">
    <ul>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
    </ul>
    <ul>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
    </ul>
    <ul>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
    </ul>
    <ul>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
    </ul>
    <ul>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
    </ul>
    <ul>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
    </ul>
    <ul>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
    </ul>
  </div>
</div>