Cross Browser support for CSS Flexbox
CSS Flexbox model is optimised for UI Design.
It is developed primarily to avoid overflowing parent element. It will shrink children when ancestor element size is constricted. It will fill the space by expanding child element's size when ancestor element size extends.
Flex container shrink and expand behaviour can break with min and max width / height property.
CSS FlexBox versions by version
W3 2009 : display: box;
box-align start | end | center | baseline | stretch
box-direction normal | reverse | inherit
box-flex <number> 0.0
box-flex-group <integer> 1
box-lines single | multiple
box-ordinal-group <integer> 1 visual
box-orient horizontal | vertical | inline-axis | block-axis | inherit inline-axis box elements no no visual
box-pack start | end | center | justify
W3 2011 : display flexbox | inline-flexbox
flex-align auto | baseline auto
flex-direction lr | rl | tb | bt | inline | inline-reverse | block | block-reverse flexboxes no lr | rl | tb | bt
flex-order <integer> 1
flex-pack start | end | center | justify
W3 2012 : display flex | inline-flex
align-content flex-start | flex-end | center | space-between | space-around | stretch
align-items flex-start | flex-end | center | baseline | stretch
align-self auto | flex-start | flex-end | center | baseline | stretch
flex-direction row | row-reverse | column | column-reverse
flex-flow <'flex-direction'> || <'flex-wrap'>
flex-grow <number> ‘0’
flex-shrink <number> ‘1’
flex-wrap nowrap | wrap | wrap-reverse
justify-content flex-start | flex-end | center | space-between | space-around
order <number> 0
Browser support for Flexbox inside of another flexbox
When using Flexbox and take full advantage of its properties, one will get at cross browser solution.
The major part here is to drop all height:100%;
and make use of the Flebox growth property, flex-grow
.
Additionally, I made both outerContent
and innerContent
flex containers, so Flebox can take care of filling the remaining space all the way.
Note, I have tested this with success on Chrome/Firefox/IE11/Edge
Fiddle demo
Stack snippet
html, body {
margin: 0;
}
body {
display: flex; /* IE11 fix */
}
.outerFlexBox {
flex: 1; /* IE11 fix */
min-height: 100vh;
display: -webkit-flex;
/* for Safari */
-webkit-flex-direction: column;
/* for Safari */
display: flex;
flex-direction: column;
background-color: green;
border: black dotted;
}
.outerHeader {
border: blue dotted;
}
.outerContent {
flex-grow: 1;
border: red dotted;
display: -webkit-flex;
/* for Safari */
-webkit-flex-direction: column;
/* for Safari */
display: flex;
flex-direction: column;
}
.innerFlexBox {
flex-grow: 1;
display: -webkit-flex;
/* for Safari */
-webkit-flex-direction: column;
/* for Safari */
display: flex;
flex-direction: column;
background-color: yellow;
border: black solid;
}
.innerHeader {
border: blue solid;
}
.innerContent {
flex-grow: 1;
border: red solid;
display: -webkit-flex;
/* for Safari */
-webkit-flex-direction: column;
/* for Safari */
display: flex;
flex-direction: column;
}
.myTable {
flex-grow: 1;
width: 100%;
border: grey solid;
}
<div class="container-fluid outerFlexBox">
<div class="outerHeader">
<h4>Some Outer Header</h4>
</div>
<div class="outerContent">
<p>Some outer content</p>
<div class="innerFlexBox">
<div class="innerHeader">
<p>Some Inner Header</p>
</div>
<div class="innerContent">
<p>Some inner content</p>
<table class="myTable">
<thead>
<tr>
<th>Some Header Column</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some row</td>
</tr>
<tr>
<td>Some row</td>
</tr>
<tr>
<td>Some row</td>
</tr>
<tr>
<td>Some row</td>
</tr>
<tr>
<td>Some row</td>
</tr>
<tr>
<td>Some row</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Cross-browser flexbox in-line styling with ReactJS
A quick suggestion would be to use Radium (http://formidable.com/open-source/radium/). It has support for auto-prefixing, for media queries and pseudo-selectors as well.
Alternatively, you can write your own wrapper around your style object. Keep in mind that you are creating your styles in Javascript and on the client, so you know what browser you are running on and you should be able to use only the prefix you need.
Something like this:
var ContainerStyle = {
display: (browser.webkit) ? '-webkit-flex' : 'flex',
//flexDirection: 'row', not here!
};
// but here:
if (browser.webkit) {
ContainerStyle.WebkitFlexDirection = 'row'
}
Of course you can put all this in a module and pass it the style that needs mangling before applying. I believe Radium (similarly to other libraries) does something similar in a sense (although I think they just output the whole prefixed CSS properties rather than selecting).
Related Topics
Responsive Iframe (Google Maps) and Weird Resizing
Bootstrap.Css: .Container:Before Display Table
Responsive Design with Media Query:Screen Size
How to Create a Inset Box-Shadow Only on One Side
How to Expand a Child Div to 100% Screen Width If the Container Div Is Smaller
How to Hide Anchor Text Without Hiding the Anchor
Vertically Center Rotated Text with CSS
Remove "Whitespace" Between Div Element
How to Position a Div in the Middle of the Screen When the Page Is Bigger Than the Screen
Two Divs Next to Each Other, That Then Stack with Responsive Change
Finding "Equivalent" Color with Opacity
How to Style a Javafx Menu and Its Items in CSS
Table-Cell - Some Kind of Colspan