Изменение размера Flexbox и прокручиваемое переполнение
У меня есть контент, размер которого я изменяю, и я хочу иметь фиксированный заголовок, который не увеличивается/не сжимается и не является частью прокручиваемого контента. Содержимое ниже становится прокручиваемым, если места недостаточно.
Внешняя оболочка содержимого (flexGrowWrapper) имеет flex-grow: 1, а внутренняя оболочка имеет height: 100%; overflow-y: auto. Мысль здесь заключается в том, что flexGrowWrapper заполнит все оставшееся пространство внутри resize div, затем внутренняя оболочка займет всю высоту flexGrowWrapper, и если есть переполнение, она должна прокручиваться.
Происходит то, что flexGrowWrapper действительно увеличивается, чтобы заполнить область resize, но кажется, что его содержимое диктует его минимальную высоту.
Как я могу сделать так, чтобы flexGrowWrapper никогда не выходил за пределы resize высоты области?
$("button").click(function() {
$(".resize").toggleClass("small");
});.resize {
height: 200px;
display: flex;
flex-direction: column;
overflow-y: hidden;
width: 300px;
}
.resize.small {
height: 100px;
}
.heading {
flex: 0 0 auto;
}
.flexGrowWrapper {
border: 2px solid red;
flex-grow: 1;
}
.wrapper {
height: 100%;
overflow-y: auto;
}
.content {
display: flex;
flex-direction: row;
clear: both;
}<button>
Resize
</button>
<div class = "resize">
<div class = "heading">
<label>Some heading that wont scroll</label>
</div>
<div class = "flexGrowWrapper">
<div class = "wrapper">
<div class = "content">
content
</div>
<div class = "content">
content
</div>
<div class = "content">
content
</div>
<div class = "content">
content
</div>
<div class = "content">
content
</div>
<div class = "content">
content
</div>
<div class = "content">
content
</div>
</div>
</div>
</div>
<div>
Something else here
</div>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Примечание. Я просмотрел этот похожий вопрос, но, похоже, у него есть некоторые отличия, и я не смог заставить решения работать на меня.
Ответы 1
Добавьте min-height: 0 к .flexGrowWrapper — см. демонстрацию ниже:
$("button").click(function() {
$(".resize").toggleClass("small");
});.resize {
height: 200px;
display: flex;
flex-direction: column;
overflow-y: hidden;
width: 300px;
}
.resize.small {
height: 100px;
}
.heading {
flex: 0 0 auto;
}
.flexGrowWrapper {
border: 2px solid red;
flex-grow: 1;
min-height: 0; /* ADDED */
}
.wrapper {
height: 100%;
overflow-y: auto;
}
.content {
display: flex;
flex-direction: row;
clear: both;
}<button>
Resize
</button>
<div class = "resize">
<div class = "heading">
<label>Some heading that wont scroll</label>
</div>
<div class = "flexGrowWrapper">
<div class = "wrapper">
<div class = "content">
content
</div>
<div class = "content">
content
</div>
<div class = "content">
content
</div>
<div class = "content">
content
</div>
<div class = "content">
content
</div>
<div class = "content">
content
</div>
<div class = "content">
content
</div>
</div>
</div>
</div>
<div>
Something else here
</div>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Почему это работает
Обратите внимание, что это связано с тем, что для флексбокс столбца значение min-height по умолчанию равно auto (вдоль ось сгиба). Вы можете увидеть несколько примеров такого поведения ниже: