Как вертикально обернуть контент с помощью flexbox?

Question

У меня есть три div внутри контейнера flexbox.

Я хотел бы, три divs будет отображаться следующим образом:

+-----------------------------------------------+ 
|  +-----------------+-----------------+  | 
|  |     |     |  | 
|  |     |     |  | 
|  +-----------------+-----------------+  | 
|            | 
|  +-----------------------------------+  | 
|  |         |  | 
|  |         |  | 
|  +-----------------------------------+  | 
|            | 
+-----------------------------------------------+ 

поэтому контейнер должен будет вертикально адаптироваться к его содержанию, но только его содержание, не более того.

Я получаю большие белые пробелы между divs, и контейнер получает 100% от height его родителя.

Я пробовал без помещения height собственности на контейнер и установки height: auto;, но ни один из них не работал.

Вот код, у меня есть:

*{ 
 
    box-sizing: border-box; 
 
} 
 

 
html,body{ 
 
    width: 100%; 
 
    margin: 0; 
 
} 
 

 
#container{ 
 
\t display: flex; 
 
\t position: absolute; 
 
\t top: 0; 
 
\t right: 0; 
 
\t bottom: 0; 
 
\t left: 0; 
 
\t margin: auto; 
 
\t justify-content: center; 
 
\t align-items: center; 
 
\t flex-wrap: wrap; 
 
\t max-width: 450px; 
 
\t border: 1px solid; 
 
} 
 

 
#div1{ 
 
\t width: 50%; 
 
\t height: 155px; 
 
\t background-color: blue; 
 
} 
 

 
#div2{ 
 
    width: 50%; 
 
    height: 155px; 
 
    background-color: red; 
 
} 
 

 
#div3{ 
 
    width: 70%; 
 
    height: 155px; 
 
    background-color: green; 
 
}

<div id="container"> 
 
    <div id="div1"></div> 
 
    <div id="div2"></div> 
 
    <div id="div3"></div> 
 
</div>

Примечание: Сделать больше, чтобы увидеть белые промежутки между дивами.

Как я могу сделать контейнер сжатым содержимым, а не быть 100% его родителем?

Заранее благодарен!

Answer 1

Когда вы создаете контейнер для гибких дисков, начальная настройка - align-content: stretch.

Это приводит к тому, что несколько линий гибких элементов распределяются по всей длине контейнера.

Отменить эту настройку с помощью align-content: flex-start на #container.

---

Чтобы сделать #container термоусадочной его содержимое по вертикали, вы должны удалить это правило:

#container { bottom: 0; } 

Поскольку #container абсолютно позиционирован, и нет родительского элемента, который позиционируется, который бы установите содержащий блок для #container, блок, содержащий по умолчанию, станет исходный содержащий блок или, область просмотра.

Именно поэтому контейнер растягивается сверху донизу, как показано черной рамкой, которую вы нанесли. После удаления bottom: 0 контейнер будет действовать больше как height: auto.

Подробнее о позиционировании CSS здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/position