Chrome/Safari needs height
set in percentages for parent, if child has set height
in percentages. It works in Firefox.
But when #outer
has height: 100vh
, then #bottom
with height 100%
and flex-basis: auto
has height
equal to 100vh
and that is why you can see scrollbar on the screenshot.
- Do not use
height: 100vh
on#outer
and addheight: 100%;
to#bottom
. - Change
flex-basis: 0
in#bottom
.