html - 列填充 : auto; no height overflows div

Question

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

.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>