Div in flex не занимает полную высоту Flex, несмотря на растяжение ⇐ CSS

[Anonymous]

Я хочу создать что -то похожее на это:

Я использую Flexbox, чтобы поместить синий прямоугольник на левом. контейнера, если он длиннее. Следовательно, я не хочу высоты хардкодов. < /P>
Я использую код ниже, полагаясь на тот факт, что текст будет расширять высоту контейнера, и, следовательно, когда я вызову высоту: 100%< /код> на синий прямоугольный элемент, он должен появиться на левой, охватывающей всю высоту родителя, но это не так. Class = "Snippet-Code">

Код: Выделить всё

.container {
display: flex;
width: 200px;
border-style: solid;
align-content: stretch;
}

.leftRectangle {
background-color: blue;
width: 20px;
height: 100%;
}

.rightRectangle {
padding: 12px;
}< /code>


Hello World

Почему он ведет себя так и каковы потенциальные обходные пути?

Подробнее здесь: https://stackoverflow.com/questions/714 ... te-stretch