Выравнивание контейнера flex?

Question

[Insom84]

Вопрос наверно простой, но никак не могу найти решения. Есть див флекс у которого задана рамка. В нем два элемента с шириной по 25%. Так вот рамка контейнера формируется не вокруг элементов, а по всей ширине, т.е. див флекс растягивается на всю страницу. Как убрать это пустое пространство, чтобы сам контейнер див флекс был по ширине его внутренних элементов? Надеюсь понятно объяснил. Спасибо.

Comments

[Павел]

div flex - width: 50%....

[Ankhena]

Вы довольно интересно считаете.
Вы хотите, чтобы два блока занимали половину большого, но при этом в большом не оставалось свободного места?

Определитесь сначала, что от чего считается.
Например, задайте размер маленьких блоков другим способом. Сначала задайте нужную ширину родителю, пусть 50%, потом детей по 50% от родителя (только аккуратно, у вас еще отступы на скрине)
Или наоборот, сначала задайте нужную ширину мелким блокам, в px или в vw или от чего они там зависят, а родителю задайте max-content.

Answer 1

[Денис Щербина]

Привет! Как вариант, пробуй)

<div style="display: flex; width: 100%; height: 100px; background-color: red;">
	<div style="display: flex; height: 100%; width: 50%; background-color: grey;">
		<div style="background-color: green; height: 100%; width: 50%;"></div>
		<div style="background-color: blue; height: 100%; width: 50%;"></div>
	</div>
</div>

Вот аналог на Bootstrap с центрированием, если используешь его)

<div class="row">
    <div class="col-12 col-sm-6 d-flex align-items-center justify-content-betwee" style="border: 2px solid #2fc7f7;">
        <div style="height: 100px; width: 50%; background-color: green;">
        <div style="height: 100px; width: 50%; background-color: blue;">
    </div>
</div>

Comments

[Ankhena]

Больше оберток! Нужно ещё больше оберток!

[Денис Щербина]

Ankhena, если есть другое решение, в рамках поставленного им вопроса, поделись)

[Ankhena]

Денис Щербина, всё в комментариях

Answer 2

[Никита Мануйлов]

Чтобы контейнер занимал ширину внутренних элементов, он должен вести себя как inline... И о чудо, у нас есть замечательное свойство display: inline-flex

Comments

[Ankhena]

Ну-ну https://jsfiddle.net/3s50gfk1/
Чудо прошло мимо

[Никита Мануйлов]

Ankhena, потому что ты задаешь потомкам ширину в процентах, которая работает относительно ширины родителя. Конечно оно пройдет мимо.
Нужно либо задавать фиксированную ширину потомкам: https://jsfiddle.net/9Lrnm4p1/
Либо задать ширину родителю (явно или относительно его родителя), а элементы внутри выравнивать относительно друг друга. Но тут и обычный флекс подойдет:
https://jsfiddle.net/9Lrnm4p1/3/
Если мы работаем с относительными единицами, нам так или иначе придется задать что-то явно.

[Ankhena]

Никита Мануйлов, это не я задаю, а автор вопроса так хочет