I have a triply-nested flex layout (horizontal flex, with two nested vertical flex, with a further nested horizontal flex). The innermost (horizontal) layout has flex-wrap: wrap set so that items will wrap if the component gets too narrow. This works fine on Chrome, Firefox, and Edge, but (shocker) not on IE 11.
I see a similar issue here, but in that case display: table was involved, which is not the case here. I wasn't able to get the proposed workaround to work here.
Following is how it renders in Chrome (gray boxes wrap):
And here's how it renders in IE 11 (gray boxes don't wrap):
Here's the code for this sample:
#top {
display: flex;
height: 300px;
width: 60%;
margin: auto;
}
.vert {
border: 1px solid #888;
border-radius: 2px;
display: flex;
flex-direction: column;
flex-grow: 1;
margin-right: 5px;
}
.vert:last-child {
margin-right: 0;
}
.top {
background-color: red;
height: 30px;
}
.mid {
flex-grow: 1;
background-color: yellow;
}
.bot {
background-color: green;
display: flex;
flex-wrap: wrap;
}
.block {
background-color: #888;
width: 80px;
height: 30px;
margin: 5px;
}<!DOCTYPE html>
<html>
<head>
<title>Wrap Test</title>
</head>
<body>
<div id="top">
<div class="vert">
<div class="top"></div>
<div class="mid"></div>
<div class="bot">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</div>
<div class="vert">
<div class="top"></div>
<div class="mid"></div>
<div class="bot">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</div>
</div>
</body>
</html>Does anybody know a workaround for this?
