I am currently working on creating a content reader with a fixed size and title that remains visible while scrolling. I attempted to achieve this using CSS3 flexbox with the following structure:
.flex {
display: flex;
flex-direction: column;
width: 100%;
height: 150px;
border: 1px solid #ddd;
}
.title {
height: 50px;
line-height: 50px;
background: #eee;
}
.text-wrap {
flex: 1 0 0;
}
.text {
height: 100%;
overflow-y: auto;
}<div class="flex">
<div class="title">Title</div>
<div class="text-wrap">
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus justo vitae urna lacinia pharetra. Quisque nulla lorem, laoreet quis dapibus nec, vehicula vitae lorem. Nunc fringilla justo vel metus rhoncus, at congue leo dictum. Morbi congue tortor lacinia, mollis sapien indsadsadf, rutrum purus. Nam ornare dapibus mi, vitae varius diam tincidunt id. Donec maximus sem nec luctus euismod. Morbi a volutpat diam. In sapien orci, auctor et facilisis eu, finibus ac mauris. Vivamus eu nunc porta, congue libero quis, rutrum nibh. Proin feugiat vel augue mattis cursus.</p>
</div>
</div>
</div>Despite setting up the structure as described above, I encountered an issue where the content overflows from the container despite applying the overflow-y property.
To address this problem, I experimented by specifying the height of the text-wrap element as 0, which surprisingly resolved the issue:
.flex {
display: flex;
flex-direction: column;
width: 100%;
height: 150px;
border: 1px solid #ddd;
}
.title {
height: 50px;
line-height: 50px;
background: #eee;
}
.text-wrap {
flex: 1 0 0;
height: 0;
}
.text {
height: 100%;
overflow-y: auto;
}<div class="flex">
<div class="title">Title</div>
<div class="text-wrap">
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus justo vitae urna lacinia pharetra. Quisque nulla lorem, laoreet quis dapibus nec, vehicula vitae lorem. Nunc fringilla justo vel metus rhoncus, at congue leo dictum. Morbi congue tortor lacinia, mollis sapien indsadsadf, rutrum purus. Nam ornare dapibus mi, vitae varius diam tincidunt id. Donec maximus sem nec luctus euismod. Morbi a volutpat diam. In sapien orci, auctor et facilisis eu, finibus ac mauris. Vivamus eu nunc porta, congue libero quis, rutrum nibh. Proin feugiat vel augue mattis cursus.</p>
</div>
</div>
</div>I find this behavior confusing. By setting the flex-basis of text-wrap to 0 and giving it the flex-grow property, shouldn't the height be automatically adjusted to fit the remaining space in the flex container? Why is there a need for setting height: 0 specifically?
Your insights on this matter would be greatly appreciated.