растягивание flex блоков относительно соседних

Рейтинг: 0Ответов: 0Опубликовано: 13.05.2023

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, вот хочется сделать высоту по контенту, как средний блок ( средний по высоте )

Ответы

Ответов пока нет.