I use Flexbox for a series of content blocks. The idea is to have blocks in a flexible container, the height of which will be determined by the total number of flexibility elements inside it. This works well in Chrome and Safari, as it automatically and correctly calculates the height of the container, but the same does not happen in Firefox + IE. My CSS look like this:
.container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
.primary {
position: relative;
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 56.25%;
margin-bottom: 10px;
-webkit-box-flex: 1;
-webkit-flex: 1 0 100%;
-ms-flex: 1 0 100%;
flex: 1 0 100%;
}
.secondary {
position: relative;
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 28.10026385%;
flex: 2 1 40%;
margin-left: 10px;
}
}
, padding-top: 28.1% , . + . IE + FF. , , -. - , . , , .
: , Firefox + IE ? , Safari + chrome?
: http://codepen.io/anon/pen/NGjYGR