Почему флекс элементы с разной длиной текста занимают именно такую ширину и высоту?

Question

[Zuckerberg]

Практиковался в верстке и наткнулся на пару момент на флексах, которые не совсем понимаю.

1. Почему флекс элементы с разным текстом занимают по ширине именно столько места? https://jsfiddle.net/hkz91s0f/1/

2. Прочитал, чтобы сделать элементы одинаковые по высоте, надо для контейнера и элементам задать display: flex. Это работает https://jsfiddle.net/hkz91s0f/2/
Но если мне нужно для элементов задать flex-direction: column, то высота опять становиться разная https://jsfiddle.net/hkz91s0f/3/
Можно ли при flex-direction: column, сделать высоту опять одинаковой?

Answer 1

[godsplan]

https://jsfiddle.net/ec915qxu/
Как вариант

Answer 2

[Рома Зварич]

1. Почему флекс элементы с разным текстом занимают по ширине именно столько места? https://jsfiddle.net/hkz91s0f/1/

Количество содержимого в элементе влияет на его базовый размер. Чем больше содержимого - тем больше места, выделяемого под элемент

Можно ли при flex-direction: column, сделать высоту опять одинаковой?

Можно. Задайте для элемента с классом inner свойства
flex-grow: 1;
https://jsfiddle.net/hisbvdis/g7pzwdqt/1/

Comments

[Zuckerberg]

Рома Зварич Спасибо, без display: flex тоже работает, выше написали )
inner {
flex-grow: 1;
border: 2px solid blue;
}