column-fill: auto; no height overflows div

Question

I have a container in a container which has multiple ul tags inside which should break into 4 columns. The should fill up from left to right. In Chrome and all the other even on firefox on my iPad this works without setting a pixel amount in the height property. But on my Desktop Firefox the content overflows when the height is set to 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>

The child container is then overflowing the parent and do not break into 4 columns.

I have updated the code – Yannick Wittwer Feb 05 '19 at 20:27 — Yannick Wittwer, Feb 05 '19 at 20:27

score 0 · Answer 1 · answered Feb 12 '19 at 22:02

Just remove column-fill: auto;:

(Note: I added margin-top: 0; to the first ul to improve the layout / distribution of the columns across the container).

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

column-fill: auto; no height overflows div

1 Answers1