I'm attempting to embed one flexbox within another flexbox. The outer box is aligned vertically:
+------+
| |
+------+
| |
| |
| |
+------+
The top section adjusts to fit the content with flex 0 1 auto, while the bottom half occupies the remaining space using flex 1 1 auto.
Within the bottom half, I have another flexbox arranged horizontally. My goal is to align the two inner boxes with space-between distribution and flex-end alignment so that they are pinned to the left and right bottom corners like this:
+------+
| |
+-+ +-|
|L| |R|
+------+
This setup appears correctly in Firefox, but in Chrome (Blink) and Safari, it displays differently:
+------+
| |
| |
| |
+-+--+-|
|L| |R|
+-+ +-+
Below is the HTML code:
<div id="outer">
<div id="top">
top
</div>
<div id="bottom">
<div id="bottomcontents">
<div id="botleft">
bottom left
</div>
<div id="botright">
bottom right
</div>
</div>
</div>
</div>
Here is the corresponding CSS:
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
border: 0px;
}
#outer {
height: 100%;
border: 1px solid red;
display: flex;
display: -webkit-flex;
flex-flow: column;
-webkit-flex-flow: column;
justify-content: center;
align-content: center;
align-items: center;
-webkit-justify-content: center;
-webkit-align-content: center;
-webkit-align-items: center;
min-height: auto;
}
#top {
width: 100%;
flex: 0 1 auto;
-webkit-flex: 0 1 auto;
border: 1px solid blue;
}
#bottom {
width: 100%;
height: 100%;
flex: 1 1 auto;
-webkit-flex: 1 1 auto;
border: 1px solid green;
}
#bottomcontents {
height: 100%;
width: 100%;
border: 1px solid pink;
display: flex;
display: -webkit-flex;
flex-flow: row;
-webkit-flex-flow: row;
justify-content: space-between;
align-content: center;
align-items: flex-end;
-webkit-justify-content: space-between;
-webkit-align-content: center;
-webkit-align-items: flex-end;
min-height: auto;
}
#botleft, #botright {
flex: 0 1 auto;
-webkit-flex: 0 1 auto;
}
#botleft {
border: 1px solid purple;
}
#botright {
border: 1px solid cyan;
}
You can view a functional version on this fiddle. If everything works fine in Firefox, could there be an error on my end? Or is this issue specific to Chrome and Safari browsers? Any suggested workarounds?