Как сделать, чтобы высота одной колонки зависила от второй?

Question

[DobrykovM]

Можно ли сделать, чтобы элемент с id "left" всегда был такой же высоты, что и элемент с id "right", при этом контент, который не помещается в элементе id "left" можно было проскролить внутри этого блока. В то же время элемент id "right" может иметь динамическую высоту зависящую от контента и можно ли обойтись без js?
То есть левый блок всегда подстраивается под высоту правого блока, а контент в левом блоке скролиться, а правый блок не имеет скрола и высота его зависит от контента в нем.

<div style="display: flex">
  <div id="left" style="width: 200px;background-color: red">
    1<br>
    2<br>
    3<br>
    4<br>
    5<br>
    6<br>
    7<br>
    8<br>
  </div>
  <div id="right" style="width: 200px;background-color: blue">
    1<br>
    2<br>
    3<br>
  </div>
</div>

Answer 1

[Ankhena]

https://jsfiddle.net/Ankhena/n067dbg9/

Comments

[DobrykovM]

Огромное спасибо

Answer 2

[LAVladis]

Возможно так

<div style="display: flex;">
  <div id="left" style="flex: 1; background-color: red; overflow: auto;">
    1<br>
    2<br>
    3<br>
    4<br>
    5<br>
    6<br>
    7<br>
    8<br>
  </div>
  <div id="right" style="flex: 1; background-color: blue;">
    1<br>
    2<br>
    3<br>
  </div>
</div>

Comments

[DobrykovM]

не, не работает так. overflow не срабатывает потому что высота блока "left" не ограничена и равна высоте его контенту

Answer 3

[SHKD]

Ответ: https://www.youtube.com/watch?v=WNuxVtnlQqo

Comments

[DobrykovM]

видео не дает ответ, на тот вопрос, который я задал. Там разбирается другой кейс