<!doctype html>
<title>Flex guide</title>
<div class="container">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3
    <p>Flex elements can increase and decrease depending on their contents.</p>
  </div>
</div>



.container { 
  display: flex;
}
.red {
  background: orangered;
  flex-grow: 1;
}
.green {
  background: yellowgreen;
}
.blue {
  background: steelblue;
  width: 40vw;
}
.container > div {
  font-size: 5vw;
  padding: .5em;
  color: white;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.