Построение колонок не задавая определенное количество

Question

подскажите пожалуйста как сделать меню. Есть меню, в нем может быть разное кол во колонок. Я пробую делать так https://jsfiddle.net/4nohe9zg/ , но зеленым цветом показан контейнер и он не растягивается под контент, а мне нужно что бы растягивался. Пробовала делать через flex-direction: column;, ситуация такая же

.wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;
}

.list {
  display: inline-block;
  height: 100%;
  columns: 206px auto;
  background: green;
}

  <div class="wrap">  
    <div class="list">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
      <div>11</div>
      <div>12</div>
      <div>13</div>
      <div>14</div>
      <div>15</div>
    </div>
</div>

Answer 1

Я изменил высоту у элемента <div class="wrap"></div> на 100vh, это означает, что его высота будет равна высоте экрана пользователя, после изменил его ширину (тут как вам нравится, я поставил 300px)

Также изменил элемент <ul class="wrap"></ul>, добавив ему display: flex; , flex-direction: column и overflow-y: auto - нужен, чтобы обрезать часть контента, который не совпадает с высотой родителя (подробнее о overflow)

.wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100vh;
}

.list {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: green;
  overflow-y: auto;
}

БЛОГ НА HUSL

Построение колонок не задавая определенное количество

Ответы (1 шт):