Flexbox - how to control height proportional to width?

Question

How do I control the height of a flexbox so that it stays proportional to the width as the element grows? I want the height of .inner to remain proportional to a given ratio as its width changes.

All examples of flexbox I've seen either holds the height constant when the width changes, or grows enough to contain its contents.

(haml)

.outer
  .inner
    %img
  .inner
  .inner

Perhaps the example will be helped if we include an image within it... or maybe not. just throwing an idea out there.

(sass)

.outer {
  display: flex;      

  .inner {
    flex: 1 1 auto;

  }
}

Answer 1

There is no method specific to flexbox that would manage this.

There is well known padding-bottom trick that would permit this but it requires a pseudo-element (for preference) and an internal absolutely positioned div to hold the content.

Reference Web Link

As you will appreciate, absolute positioning is somewhat inflexible so laying out your content would be the main issue.

Applying this to flexbox:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.outer {
  display: flex;
  width: 500px;
  margin: 1rem auto;
  align-items: flex-start;
}
.inner {
  flex: 1 1 auto;
  border: 1px solid grey;
  position: relative;
}
.inner:before {
  content: "";
  display: block;
  padding-top: 100%;
  /* initial ratio of 1:1*/
}
.content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
/* otehr ratios */

.ratio2_1:before {
  padding-top: 50%;
}
.ratio1_2:before {
  padding-top: 200%;
}
.ratio4_3:before {
  padding-top: 75%;
}
.ratio16_9:before {
  padding-top: 56.25%;
}

<div class="outer">
  <div class="inner">
    <div class='content '>Aspect ratio of 1:1</div>
  </div>
  <div class="inner ratio2_1">
    <div class='content'>Aspect ratio of 2:1</div>
  </div>
  <div class="inner ratio16_9">
    <div class='content'>Aspect ratio of 16:9</div>
  </div>
</div>