Я пытаюсь создать прокручиваемый flex-child, высота которого определяется его свойством flex-grow.
Пример:
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.heading {
background: #9D8189;
flex: 0 0 auto;
padding: 2rem;
min-height: 10rem;
}
.content {
background: #FFE5D9;
flex: 1 0 auto;
padding: 2rem;
/* Makes it scrollable but breaks the flexbox layout */
max-height: 40vh;
overflow: scroll;
}
.box {
background: #D8E2DC;
padding: 7rem;
}
<body>
<div class="container">
<div class="heading">heading</div>
<div class="content">
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
</div>
</div>
</body>
( jsfiddle )
Макет состоит из flex-parent .container и двух flex-children:
.heading, который имеет фиксированную высоту, определяемую padding и min-height и .content, который должен занять все оставшееся после .heading пробела. Для этого у первого flex-child (.heading) есть flex: 0 0 auto, а у второго flex-child (.content) - flex: 1 0 auto.
Тем не менее, я также хочу, чтобы .content содержал прокручиваемый контент внутри. На данный момент единственный способ, которым я вижу, что я могу это сделать, это заставить .content иметь несколько фиксированную высоту (например, через max-height, как я делал в приведенном примере, установив его на 40vh). Но хотя он делает его прокручиваемым, он также нарушает компоновку flexbox, где высота content равна parent высота минус heading высота.
Кажется, что как только я указываю .content высоту, он перестает уважать расположение flexbox, что имеет смысл. Но есть ли другой способ сделать его прокручиваемым, сохраняя при этом его высоту, которая определяется макетом flexbox?