Flexbox - how to control height proportional to width?

Question

How to control flexbox height so that it remains proportional to width as the element grows? I want the .inner height .inner remain proportional to the given ratio as the width changes.

All examples of flexbox I have seen that it either has a constant height when the width changes, or grows enough to contain its contents.

(Haml)

 .outer .inner %img .inner .inner 

Perhaps this example will help if we include an image in it ... or maybe not. just throwing an idea.

(Sass)

 .outer { display: flex; .inner { flex: 1 1 auto; } } 

Answer 1

There is no method for flexbox to handle this.

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

Web Link

As you understand, absolute positioning is somewhat inflexible, so the main problem will be to disclose your content.

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>