растягивание flex блоков относительно соседних
3 вертикальных блока, с растягивающимися по высоте центральной частью
.tree {display: flex; height: auto;}
.tree > div {display: flex; flex-direction: column; width: 100%; border:1px solid red;}
.tree > div > div {border:1px solid orange;}
.tree > div > div:nth-child(1) {flex: 0 1 30px;}
.tree > div > div:nth-child(2) {flex: 1 1 auto;}
.tree > div > div:nth-child(3) {flex: 0 1 30px;}
<div class="tree">
<div>
<div>Text</div><div>Text</div><div>Text</div>
</div>
<div>
<div>Text</div><div>One Line<br />Two Line</div><div>Text</div>
</div>
<div>
<div>Text</div><div>Text</div><div>Text</div>
</div>
</div>
есть 3 блока, расположены вертикально. внутри каждого блока есть верхняя, средняя и нижняя часть. если в среднюю часть вписать много текста ( я вписал 2 строки ) то, кроме самого блока растянувшегося в высоту, растягиваются соседние блоки
подскажите, как можно изменить код таким образом, что бы верхние и нижние части так же тянулись, вместе с соседними? у меня в верстке ограничение на высоту 30px, вот хочется сделать высоту по контенту, как средний блок ( средний по высоте )
Источник: Stack Overflow на русском