How to make that a column using flexbox has a height which automatically/dynamically matches its width?
#container { display: flex; width: 500px; flex-direction: row; }
#a { background-color: red; width: 50%; }
#b { background-color: blue; width: 50%; height: 50%; }<div id="container">
<div id="a">
Hello
</div>
<div id="b">
This div should be square, its height should automatically match its width, and text vertically centered
</div>
</div>Note: I don't want to use the aspect-ratio property which is too young (not support on enough browsers for my project) nor the similar solutions of Maintain the aspect ratio of a div with CSS, but with flexbox, as mentioned on top. Also this linked question does not consider the vertical alignement either.
