prevent flex element from expanding out of container

Asked Mar 20 '19 at 14:55

Active Mar 20 '19 at 17:09

Viewed 30 times

Here is a JSFIDDLE.

Pink is the dimension of the flex-container.
flex element class="fxel fxel2" is exanding out of the container because its very "tall".

All solutions i've seen make some sort of "assumption" to the individual height of elements (in px or %).

the height of class="fxel fxel1" varies at runtime. So no assumption regarding the height can be made.

class="fxel fxel2" should take all of the remaining height left in the pink.
when the content is to "tall" it should start a overflow: scroll INSIDE <div class="fxel fxel2"> (this means the elements div has a scrollbar we dont "overflow" the window/body/html)

Any suggestions?

edited Jun 20 '20 at 09:12

Community

asked Mar 20 '19 at 14:55

Andre Elrico

min-height:0 to your element, then you add overflow to them – Temani Afif Mar 20 '19 at 14:59
thank you `.fxel2 { min-height: 0; overflow-y: scroll; }` gets me there! Thank you sir. – Andre Elrico Mar 20 '19 at 15:02
would you like to answer and loose a word of why and how `min-height: 0` solves this? – Andre Elrico Mar 20 '19 at 15:03
everything is already explained in the duplicate ;) – Temani Afif Mar 20 '19 at 15:04
`.fxel2 { min-height: 0; overflow-y: auto; }` is better. Sorry for asking a dupe :*( – Andre Elrico Mar 20 '19 at 15:06
maybe someone can use this dupe to find the right solution. – Andre Elrico Mar 20 '19 at 15:08
yes, dupe are made for this purpose, attract search to the canonical Q/A – Temani Afif Mar 20 '19 at 15:11

0 Answers0