Контейнер на самом деле имеет ширину 100%, т.е. охватывает всю ширину окна.Но с настройками Flex по умолчанию его дочерние элементы будут просто выравниваться по левому краю и будут иметь ширину, равную только их содержимому.
Однако, если вы примените flex-grow: 1;
к дочерним элементам, чтобы они стали шире, они будутрастянуть и заполнить всю ширину контейнера.
.masonry_container {
display: flex;
}
.masonry_left_col {
border: 1px solid grey;
flex-grow: 1;
}
.masonry_right_col {
border: 1px solid grey;
flex-grow: 1;
}
<div class="masonry_container">
<div class="masonry_left_col">
Content
</div>
<div class="masonry_right_col">
Content
</div>
</div>
Или, если вы хотите, чтобы гибкие элементы полностью и без усилий растягивались влево и вправо внутри контейнера, добавьте justify-items: space-between
в контейнер
.masonry_container {
display: flex;
justify-content: space-between;
}
.masonry_left_col {
border: 1px solid grey;
}
.masonry_right_col {
border: 1px solid grey;
}
<div class="masonry_container">
<div class="masonry_left_col">
Content
</div>
<div class="masonry_right_col">
Content
</div>
</div>