CSS3 Flex Box - Div overflows when it wraps
Question
I'm trying to make a responsive design for a web app, but I'm running into problems with the divs not resizing when it wraps. I'm trying to avoid javascript for styling if at all possible.
I have a wrapper div with flex-flow:column wrap;. The divs inside have a minimum width so when the screen gets too short, it will wrap into a row. The problem is that if the second div is full horizontally, it doesn't resize horizontally when it wraps.
This is an example of my problem:
HTML:
<div id=wrapper>
<div id=header>
Header<br />
Resize the black box to see the issue.
</div>
<div id=middle>
<div id=middle-left>Middle Left</div>
<div id=middle-right>Middle-ish from a more vertical point of view but definitely more to the right side, though only if it's not too tall, then it's more of a middle-low vertically.</div>
</div>
<div id=bottom>Bottom</div>
</div>
CSS3:
#wrapper {
border:2px solid;
padding:10px 40px;
width:500px;
height:600px;
resize:vertical;
overflow:auto;
display: flex;
flex-flow: column nowrap;
}
#header, #middle, #bottom {
border:1px solid red;
}
#middle-left, #middle-right {
border:1px solid blue;
min-height:100px;
flex:1;
}
#middle-left {
min-width:200px;
}
#header {
flex: 3 1;
}
#middle {
flex:3;
display:flex;
flex-flow:column wrap;
}
#bottom {
flex:1;
}
Solution
I figured this out. I ended up using CSS media queries with max-widths and max-heights. It's kind of a hackish way to do things, but nothing else seemed to be working.
OTHER TIPS
Use the overflow
property on the parent container to avoid this issue:
#middle {
overflow: hidden;
}