leponceau.org

Programming And Stuff, You Know The Thing…

css infinite column length layout using flex

Posted at — Apr 28, 2021
<div class="grid">
  <div class="col">
    <div class="item">1a</div>
    <div class="item">1bbbbbbbbbbbbbbbbbbbbbbbbbbbb<br> 1b
    </div>
    <div class="item">1c</div>
  </div>
  <div class="col">
    <div class="item">2a</div>
    <div class="item">2b</div>
    <div class="item">2c</div>
  </div>
  <div class="col">
    <div class="item">3a</div>
    <div class="item">3b</div>
    <div class="item">3c</div>
  </div>
</div>
.grid {
  display: flex;
}

.col {
  border: dashed 1px black;
  flex: 1 1 0;
  overflow: hidden;
}

https://jsfiddle.net/xkpw6hob/