Flexbox column, child goes out of bound in Edge

Asked Dec 20 '18 at 18:06

Active Dec 20 '18 at 19:07

Viewed 123 times

I have a flex-box container and a child in it, The child should fill the container but should not go out of bound.

The following CSS works fine on all browsers except for Edge, the content goes out of bound

.wrapper {
   display: flex;
   flex-direction: column;
   height: 200px;
}

.child {
   flex: 1;
}

Here is a stackblitz reproduction, please try it on Chrome and Edge to see the difference.

Why isn't flex: 1 working on Edge when flex-box is supported?

P.S. Using height: 100% will fix it, but another issue occurs (in Edge only), the horizontal scrollbar gets pushed down and disappears.

Chrome screenshot (works properly)

Edge screenshot (horizontal scrollbar is pushed down when it should not)

This demo uses height: 100%

edited Dec 20 '18 at 19:07

asked Dec 20 '18 at 18:06

Murhaf Sousli

Can you reproduce this without ngx-scrollbars? – Nate Whittaker Dec 20 '18 at 19:04
@NateWhittaker I already added a reproduction https://stackblitz.com/edit/angular-nndbgh?file=src%2Fapp%2Fapp.component.css – Murhaf Sousli Dec 20 '18 at 19:05
I guess I'm confused as to why ngx-scrollbar is mentioned in the question then? – Nate Whittaker Dec 20 '18 at 19:25
Because it is my use case, so I don't get `height: 100%` as a fix, you never mind – Murhaf Sousli Dec 20 '18 at 19:26
Spent more time on this than I would have liked but the fix is to add `min-height: 0` to `.ng-scrollbar-y-layout`. You can read more about the issue [here](https://stackoverflow.com/questions/43934648/how-to-make-flexbox-items-shrink-correctly-when-in-a-nested-container). – Steven B. Dec 20 '18 at 20:14
@StevenB. it WORKED! I spent 2 days on this and couldn't figure it out! Thanks a lot – Murhaf Sousli Dec 21 '18 at 01:02

0 Answers0