Как сделать чтобы высота ребенка блока уходила в скролл в flex контейнере?

Question

[Return Me Void]

Вот пример:



Нужно чтобы правый блок, если там слишком много текста, был не выше левого. Если там текста больше, чем высота, должен уходить в скролл.

Контент динамический, поэтому конкретные значения установить нельзя.

Спасибо

Answer 1

[Aetae]

На гридах это вроде можно сделать магией fit'а, а на флексах я знаю ток 1 вариант: правому блоку position:relative, в него scroll-блиок с

position: absolute; 
top: 0; 
bottom: 0;
right: 0;
left: 0;

:)

Comments

[szQocks]

2 минуты назад страницу обновлял, ответа небыло, лол)
а ща написано 6 минут назад уже написан

[Aetae]

szQocks, хз, кэширует небось.

[Return Me Void]

Aetae, покажи на гридах, пожалуйста

[Aetae]

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

[Return Me Void]

Aetae, А как этот скролл перенести в дочерний блок?

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

Вот пример:

[Aetae]

Return Me Void, ну то же самое, только вид с боку:
делаешь правый блок flex column, в него кладёшь два дива - первый шапка, второй flex: 1 - чтоб растянуть на всё оставшееся пространство, а дельше в этот растянутый второй кладёшь absolute scroll.

Answer 2

[szQocks]

><div class="box">
  <div class="l">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro ex cum nesciunt non itaque perspiciatis odio reiciendis voluptates optio excepturi? Reprehenderit ut illo harum quia minima odio vel cupiditate repudiandae?</div>
  <div class="r">  <div class="r__inner">Этот текст должен быть высотой не выше левой стороны, должен уходить в скролл, если надо. Lorem ipsum dolor sit amet consectetur adipisicing elit.</div></div>
</div>

.box {
  display: flex;
  border: 1px solid red;
}

.l {
  flex: 0 0 75%;
}

.r {
  flex: 0 0 25%;
  overflow-y: auto;
  position: relative;
}
.r__inner{
  position: absolute;
  top: 0;
  left: 0;
}
.l, .r {
  border: 1px solid blue;
  font-size: 30px;
}

Comments

[Return Me Void]

szQocks, А как этот скролл перенести в дочерний блок?

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

Вот пример:

[szQocks]

Return Me Void, таким же подходом, только display: flex задаёшь уже для r__inner и так же пляшешь абсолютом уже от r__scroll, вот только блок будет не выше чем шапка, я никогда не видел таких узких по высоте блоков со скроллом, те действительно это нужно или ты троллишь сидишь ? укуренный ?

[Return Me Void]

szQocks, это же тестовый пример, ты серьёзно судишь по тестовому примеру? по-моему, курю тут не я)