Column height matching automatically its width, using CSS flexbox

Question

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.