Div in Flex Does Not Take Flex's Full Height Despite Stretch

I want to create something similar to this:

I'm using flexbox to position the blue rectangle on the left and the text on the right.

The text will be dynamic so it may expand the height of the container if it's longer. Hence, I don't want to hardcode height.

I'm using the code below, relying on the fact that the text will expand the height of the container, and hence when I call height: 100% on the blue rectangle element, it should appear on the left spanning entire height of the parent, but it doesn't.

.container {  display: flex;  width: 200px;  border-style: solid;  align-content: stretch;}.leftRectangle {  background-color: blue;  width: 20px;  height: 100%;}.rightRectangle {  padding: 12px;}

<div class='container'><div class='leftRectangle'></div><div class='textContent'>Hello World</div></div>

Why is it behaving this way and what are potential workarounds?