Дайте гибкому содержанию ряда 100% -ую высоту контейнера - PullRequest
0 голосов
/ 01 мая 2018

У меня есть контейнер 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...