изгиб в ряд, но элементы заполняют высоту родителя

Question

У меня есть макет, который выглядит примерно так:

<div style="display: flex; flex-direction: row;height:100%;">
  <div style="width:250px"></div>
  <div style="flex:1;height:100%"></div>
</div>

Второй внутренний div растет вертикально, поэтому мне нужен этот div для прокрутки (но не левый внутренний div). Это прекрасно работает в Firefox, но в Chrome второй внутренний div оборачивается до высоты содержимого и продолжает расти за пределами экрана. Из того, что я могу сказать, это потому, что в Chrome высота 100% работает, только если родитель имеет определенную высоту.

Как я могу заставить второй внутренний div flex заполнить ширину, а также соответствовать высоте родительского элемента?

Answer 1

.container {
  display: flex;
  flex-direction: row;
  height: 100vh;
}

.container > div:first-child {
  flex: 0 0 250px;
  align-self: flex-start;
  background-color: aqua;
}

.container > div:last-child {
  flex: 1;
  overflow: auto;
  background-color: pink;
}

body {
  margin: 0;
}

<div class="container">
  <div>Item One</div>
  <div>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>
  </div>
</div>