<div class="container">
    <p>When you turn something into a flex container, you can set flex properties on its items, which will let you do ratios in a whim.</p>
    <p>You can do something like 2:1, but any other number will also work.</p>
    <p>Note that the browser will do the maths for you, no need to worry about percentages.</p>

<div class="container">
  <div id="item-1">flex: 2</div>
  <div id="item-2">flex: 1;</div>

<div class="container">
  <div id="item-3">flex: 3.524</div>
  <div id="item-4">flex: 0.52</div>
.container {
  display: flex;
  max-width: 50em;
  margin: 2em auto;

  #item-1 {
    flex: 2;
    background-color: #16E7CF;

  #item-2 {
    flex: 1;
    background-color: #00A89D;

  #item-3 {
    flex: 3.524;
    background-color: gold;
  #item-4 {
    flex: 0.52;
    background-color: hotpink;
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.