How to change block height dynamically?

Question

css

How to specify the dimensions of the block when laying out with flexbox, so that, regardless of its content, the height dynamically changes along with the width, while maintaining proportions? Is there a "correct" way? I do this (sass):

div
    overflow: hidden
    &:before
        content: ''
        padding-top:  100%
        float: left

The problem is that this doesn't work in chrome.
Perhaps I want something that, by definition, should not be? Flexbox is a new topic for me and I suspect that they are simply not designed for this.

Answer 1

You here: https://benmarshall.me/responsive-iframes/
Do not look at the name, it is suitable for all blocks.