Flex. Как сделать, сайдбар тянется на высоту контентного блока, но НЕ максимальная высота сайдбара не может быть больше высоты контентного?

Question

[trepux]

Пример на картинке. Контентный блок (синий) имеет разную высоту, в зависимости от содержимого. Сайдбар (зеленый) должен иметь такую же высоту, как контентный, но если в контентном блоке мало информации, а в сайдбаре больше - высота сайдбара не может быть больше высоты контента.
Пните, в какую сторону копать?

Answer 1

[Адам Сулумов]

Задай для блока с контентом свойство min-height которое будет равно минимальной высоте сайтбара.

Comments

[trepux]

Высота контентного блока на всех страницах разная, в том то и проблема

Answer 2

[profesor08]

align-items: stretch;

<div class="flex">
  <div>1</div>
  <div>
    2<br>
    2<br>
    2<br>
    2<br>
    2<br>
    2<br>
    2<br>
    2<br>
  </div>
</div>

.flex {
  display: flex;
  align-items: stretch;
}

.flex div:first-child {
  background: red;
}

.flex div:last-child {
  background: green;
}

Comments

[trepux]

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

[profesor08]

trepux, бдя меня нет разницы между блоком 1 и блоком 2. Тебе надо чтоб блоки всегда были одинаковой высоты на flex. Свойство, которое это делает я указал.

[Александр Маргинал]

Хороший вариант. Просто указываешь чтобы они были одинаковыми, а какие либо стили задаёт внутреннему див в сайдбаре который не может быть больше чем родитель

[profesor08]

Александр Маргинал, автор возможно сам не понимает что ему надо, и поэтому как-то не так выразился и его не так поняли.