1

I want to break a flexbox column container after every 4th element. For that I defined a max-height, since I know the height of every element.

.subnav {
  position: absolute;
  top: 5px;
  left: 20px;
}
ul {
  display: flex;
  flex-flow: column wrap;
  list-style: none;
  max-height: 80px;
  background-color: grey;
  padding: 0px;
}

li {
  box-shadow: inset 0 0 1px #000;
  text-align: center;
  width: 200px;
}

li:nth-child(4n) {
  flex-basis: 100%;
}
<div class="subnav">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
  </ul>
</div>

The flex container renders its child elements correctly, but the actual size of the container (grey area) is smaller. Why is this the case and how can I fix it?

Result for me: Rendered Image

Johannes Deml
  • 169
  • 6
  • 1
    Bro Just add the ```padding: 0;``` in ```ul``` and your problem will get solved. Let me know if this is what you wanted !? – Kunal Tanwar Aug 11 '21 at 16:45
  • 1
    @KunalTanwar No, this is not my problem. The problem is, that 5,6 and 7 are not in the grey box, even though they should be from my understanding. Thanks for the note, this is a duplicate of https://stackoverflow.com/questions/33891709/when-flexbox-items-wrap-in-column-mode-container-does-not-grow-its-width – Johannes Deml Aug 11 '21 at 17:02
  • Oh! Well did you solve your problem?? – Kunal Tanwar Aug 11 '21 at 17:11
  • 2
    No, it seems to be a limitation for all major browsers, that this is not possible. – Johannes Deml Aug 12 '21 at 14:31

0 Answers0