Chcę aby div wrapper miał trzy kolumny a jego maksymalna wysokość to 800px. Jeśli zawartość się nie mieści to wtedy pojawi się pionowy suwak. Wykorzystuje do tego display flex. W każdej liście UL występuje różna ilośc LI. Co muszę zrobić aby listy UL układała się jedna pod drugą bez dziur. Taki mam kod:

[HTML] pobierz, plaintext 
<style type="text/css">
 
ul{
  list-style-type: none;
  padding:0;
	margin:0;
}
 
#wrapper{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	border:1px solid silver;
	max-height: 800px;
	overflow-y: scroll; 
	max-width: 1200px;
	justify-content: flex-start;
	align-items: flex-start;
}
 
#wrapper>ul{
	margin-bottom:10px;
	flex-grow:0;
	flex-basis:33%;
}
 
</style>
[HTML] pobierz, plaintext 

[PHP] pobierz, plaintext 
 
<div id="wrapper">
 
    <?php
    foreach(array_keys($testowa) as $nazwy1){
      echo "<ul>";
      echo "<li><b>".$nazwy1."</b>";
        echo "<ul class='ul2'>";
          foreach(array_keys($testowa[$nazwy1]) as $nazwy2){
            echo "<li>".$nazwy2."</li>";
          }
        echo "</ul>";
      echo "</li>";
      echo "</ul>";
    }
   ?>
 
</div>
[PHP] pobierz, plaintext 

I wygląda to tak



Próbowałem też z flex-direction:column i wtedy mam coś takiego



UL układają się jedna pod drugą tak jak chcę ale nie mam kontroli na liczbą kolumn. Jeśli tych kategorii będzie dużo tworzą mi się kolejne kolumny i pojawia się poziomy suwak.. Próbowałem też użyć display grid ale też mi to nie wychodzi.

Czyli przy flex-direction:row mogę zadeklarować ilość kolumn (flex-basis:33%) ale robią się dziury między UL, z kolei przy flex-direction:column UL układają się jedna pod drugą ale nie mogę ograniczyć liczby kolumn. Ktoś podpowie jak to zrobić?

Nie jest to możliwe w układzie flex. Szukaj po haśle "CSS masonry".

Osobiście uważam, że w układzie flex + flex-column, layout jest czytelniejszy niż to co chcesz osiągnąć.