Why should I specify height: 0, even if I specified flex-basis: 0 in CSS3 flexbox?

Question

I am trying to make a fixed size reader with a headline. The title should be displayed even if the content scroll. In this situation, I tried to create such a structure using CSS3 flexbox:

.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> 

so that the content gets the rest of the height regardless of the size of the flex container. However, as you can see, the content exits the container, and the overflow-y property does not work.

However, if I point the height to 0 in text-wrap , I see that my code works as shown below:

 .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 do not understand this behavior. I understand that flex-basis is a property that decides the initial height of an element (since flex-direction set to column ) and that flexbox divides the remaining heights into elements according to the flex-grow property.

Then in this case, since text-wrap flex-basis (initial height) is 0 , and this is the only element that has the flex-grow property, you should not set the height on the other flex containers? Why is this behavior happening?

Also, why should I specify the height: 0 property for text-wrap to make my code work?

Thank you very much.

Answer 1

Your code is correct and working correctly.

There is another flexbox function in which you need to consider:

The initial setting in the min-height: auto flexibility container. This means that by default the flex element cannot be smaller than its contents. After you override this setting, your layout works as expected.

You can use height: 0 , but here is the standard method:

 .text-wrap { flex: 1 0 0; min-height: 0; /* new */ } 

The full explanation is here: Why doesn't the element bend with decreasing content size?

 .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; min-height: 0; /* new */ } .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>