Я использую Flex типа столбца, чтобы показать список содержимого. Как автоматически создать новую строку содержимого без изменения высоты div? Должна быть заполнена правая часть div.

Переполнение в новую строку не работает. Flex flex row работает, но мне это не нужно.

.container {
  width: 50vw;
  height: 100px;
  background-color: lightcoral;
}
.container ul{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
<div class="container">
  <ul>
    <li>Number one</li>
    <li>Number two</li>
    <li>Number three</li>
    <li>Number four</li>
    <li>Number five</li>
    <li>Number six</li>
    <li>Number seven</li>
    <li>Number eight</li>
  </ul>
</div>
1
Vesselin Cohen

2 ответа

Для списка вам нужно наследовать высоту, или установить его на 100% его родителя

.container {
  width: 50vw;
  height: 100px;
  background-color: lightcoral;
}
.container ul{  
  height: inherit;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
<div class="container">
  <ul>
    <li>Number one</li>
    <li>Number two</li>
    <li>Number three</li>
    <li>Number four</li>
    <li>Number five</li>
    <li>Number six</li>
    <li>Number seven</li>
    <li>Number eight</li>
  </ul>
</div>

Вы должны добавить только height: 100%; к ul

.container {
  width: 50vw;
  height: 100px;
  background-color: lightcoral;
}
.container ul{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height:100%;
}
<div class="container">
  <ul>
    <li>Number one</li>
    <li>Number two</li>
    <li>Number three</li>
    <li>Number four</li>
    <li>Number five</li>
    <li>Number six</li>
    <li>Number seven</li>
    <li>Number eight</li>
  </ul>
</div>
58589092