Skip to content
This repository has been archived by the owner on Jan 19, 2024. It is now read-only.

ie nested flexbox with wrap overflow bug #258

Open
rekna1 opened this issue Aug 6, 2018 · 0 comments
Open

ie nested flexbox with wrap overflow bug #258

rekna1 opened this issue Aug 6, 2018 · 0 comments

Comments

@rekna1
Copy link

rekna1 commented Aug 6, 2018

I maybe have a case that is related to #170 (I posted this there as a comment). The sample is somewhat more complicated with more nested flexboxes.

https://jsbin.com/deticuzuvi/1/edit?html,css,output

As you can see in IE the content of div.docs will overflow even if wrap is specified when screen is small enough. All elements of div.docs will remain on one line while they should wrap onto the next line.
I fixed it by wrapping the contents of div.docs with a div.iewrap-fix:

.iewrap-fix { flex:1 1 100%; display:flex; flex-flow:row wrap; }

One can optionally remove wrap on div.docs as well.
(just uncomment div.iewrap-fix to see the corrected result in IE or view fixed here https://jsbin.com/foromukuna/1/edit?html,css,output)

Don't know if this fix is general enough to work in other cases as well. Fix seems to have no negative effects in chrome, firefox and edge

Added jsbin with fixed result here: https://jsbin.com/foromukuna/1/edit?html,css,output

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant