Как задать flex-элементу overflow, если его высота определяется flex-контейнером?

Question

[Марк Березовский]

#container {
    display: flex;
}
#block1 {
    height: 75px;
}
#block2 {
    flex: 1; // автоматическая высота, основанная на высоте block1 и высоте container
    overflow: auto; // должна появляться прокрутка, если контент не помещается в блок
}

Comments

[Ankhena]

если его высота определяется flex-контейнером

Так и где высота контейнера?
Как только вы её зададите, задуманное тут же и сработает.

[Марк Березовский]

Ankhena, так прикол в том, что высота контейнера определяется еще одним flex-контейнером ))

[Ankhena]

Марк Березовский, а может, всё приколы оптом расскажете? Желательно сюда: jsfiddle.net.

[Марк Березовский]

Ankhena, https://jsfiddle.net/vzmatg32/10/

[Виталий Першин]

Марк Березовский, Так а по какому критерию он должен быть ограничен то?

[Ankhena]

Марк Березовский, Для этого нужно ограничить высоту pattern. Вы же позволяете им растягиваться как угодно, а значит и прокрутки не будет.

[Марк Березовский]

Ankhena, спасибо, помогло. запишите это в ответ

Answer 1

[mirjaloltv]

#container {
    display: flex;
}
#block1 {
    height: 75px;
}
#block2 {
    height: 200px;
    flex: 1; 
    overflow: auto; 
}

Comments

[mirjaloltv]

height: 200px