У меня есть контейнер flexbox с расположением строк с тремя контейнерами. Контейнер справа имеет основное содержимое, и я хочу, чтобы высота левого контейнера соответствовала.
Если я установлю для контейнера align-items
значение stretch
, он будет делать то, что я хочу. Однако я не могу использовать stretch
из-за обстоятельств, не зависящих от меня.
Единственные реальные варианты, которые у меня есть, это center
и flex-start
. Однако процентные высоты для .left
и .mid
, по-видимому, полностью игнорируются этими настройками align-items
.
Есть ли способ заставить левый контейнер расти с ростом родителя, кроме переключения на align-items: stretch
?
.container {
align-items: flex-start;
display: flex;
flex-direction: row;
border: 1px solid black;
}
.left {
width: 34%;
border: 1px solid red;
display: flex;
flex-direction: column;
align-items:center;
justify-content:center;
}
.mid {
width: 3%;
height: 100%;
border: 1px solid green;
}
.right {
border: 1px solid blue;
}
<div class="container">
<div class="left">
<div>Hello World!</div>
</div>
<div class="mid"></div>
<div class="right">
<div>Right content</div>
<div>Right content</div>
<div>Right content</div>
<div>Right content</div>
<div>Right content</div>
<div>Right content</div>
<div>Right content</div>
<div>Right content</div>
</div>
</div>