Proportional Adaptive Containers

CSS only adaptive containers that stay within a proportion defined.

HTML

<h1>Proportional Adaptive Containers</h1>

<h2>16:9</h2>
<div class="flex sixteen-nine">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
</div>

<h2>1:1.618</h2>
<div class="flex golden-ratio">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
</div>

<h2>4:3</h2>
<div class="flex four-thirds">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
</div>

<h2>1:1</h2>
<div class="flex square">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
</div>

CSS

* { box-sizing: border-box; }
body { margin: 0; font-family: sans-serif; }
h1,h2 { text-align: center; }
div.flex {
  background-color: #ccc;
  display: flex;
  flex-wrap: wrap;
}
div.flex > div {
  background-color: yellow;
  font-size: 7vw;
  margin: 1.5vw;
  text-align: center;
  width: 30vw;
}


/* Sixteen by nine */
div.sixteen-nine > div {
  height: 16.874999998vw;
  line-height: 16.874999998vw;
}

/* Golden Ratio */
div.golden-ratio > div {
  height: 18.541409147vw;
  line-height: 18.541409147vw;
}

/* Four Thrids */
div.four-thirds > div {
  height: 22.500000006vw;
  line-height: 22.500000006vw;
}

/* Square */
div.square > div {
  height: 30vw;
  line-height: 30vw;
}