Как сделать так, чтобы два flex блока сжимались одинаково?

Question

[Антон Антон]

https://codepen.io/FragsterAt/pen/gOZBgjg

как сделать так, чтобы блоки 1 и 2 сжимались одинаково, до того момента, когда блок 1 упрется в размер содержимого, после этого чтобы сжимался только блок 2 до какого-то размера, потом появлялась вертикальная прокрутка?

сейчас получилось сделать так, чтобы только пропорционально высоте блоков 1 и 2 сжималось либо сжимается сначала блок 2, потом блок 1

Comments

[Ankhena]

Задать им одинаковый flex-basis. На самом деле не обязательно именно через basis, можно минимальной высотой или отступами.

Возможно, вам будет удобнее делать такие вещи гридами

[Антон Антон]

Ankhena, я использую tailwindcss.

сначала я добавил flex-1, который, вроде бы делает то же самое, но после этого лого стал сжиматься меньше своего размера. сейчас я понял, что это из-за того, что flex-1 еще и сжиматься разрешает.
указав basis-0 все заработало, спасибо!

Answer 1

[Антон Антон]

Нужно у элементов 1 и 2 указать одинаковый flex-basis и при этом запретить сжиматься, например
flex: 1 0 0%
или по частям:

flex-grow: 1
flex-shrink: 0
flex-basis: 0%