Контейнер Flex со свитком без фиксированной высоты

Question

У меня есть контейнер, который должен быть высотой окна. Внутри есть некоторые элементы (желтый, салатовый и красный). Красный контейнер имеет заголовок (зеленый) и синий контейнер, который содержит более мелкие элементы. Этот синий контейнер должен иметь свиток. Все элементы не должны go превышать высоту окна (чтобы на самом окне не было полосы прокрутки). Надеюсь, я сделал это достаточно ясно, чтобы понять.

.blue{
  flex:1 1;
  overflow:auto;
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(155px,1fr));
  grid-column-gap: 1.25rem;
  grid-row-gap: 1.25rem;
  padding:10px;
  background:blue;
}
.blue .item{
    transition: background .2s,box-shadow .3s;
    -moz-user-select: none;
    height: 175px;
    text-align: center;
    border-radius: 5px;
    background: #1C2127;
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    align-items: center;
    user-select: none;
}

Как сделать так, чтобы синий контейнер заполнил оставшееся пространство флексом, а внутри была полоса прокрутки?

Я пытаюсь решить эту проблему, но это не похоже на работу. Я сделал кодовую ручку для этого вопроса:

https://codepen.io/nedasoo/pen/PoqdOyr

Спасибо

Answer 1

Добавлен стиль flex-basis: 0

html,body{
  height:100%;
  margin:0
}
.container{
  height:100%;
  background-color:grey;
  width:500px; /* For demonstration purposes, I've changed '800px' to '500px' */
  display:flex;
  flex-direction:column;
}
.yellow{
  background:yellow;
  height:80px;
}
.lime{
  background:lime;
  height:80px;
}
.red{
  background:red;
  flex:1 1;
  display:flex;
  flex-direction:column;
}
.green{
  flex:0;
  background:green;
  padding:10px;
  text-align:center;
}
.blue{
  flex:1 1; /* You can also add `0` here */
  flex-basis: 0; /* You can also add '0' after the abbreviation 'flex', flex: 1, 1, 0;*/
  min-height: 50px; /* For demonstration purposes, I've added the 'min-height: 50px' style */ 
  overflow:auto;
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(155px,1fr));
  grid-column-gap: 1.25rem;
  grid-row-gap: 1.25rem;
  padding:10px;
  background:blue;
}
.blue .item{
  transition: background .2s,box-shadow .3s;
  -moz-user-select: none;
  height: 175px;
  text-align: center;
  border-radius: 5px;
  background: #1C2127;
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  align-items: center;
  user-select: none;
}

<div class='container'>
  <div class='yellow'>Yellow</div>
  <div class='lime'>Lime</div>
  <div class='red'>
    <div class='green'>Some text here</div>
    <div class='blue'>
      <div class='item'></div>
      <div class='item'></div>
      <div class='item'></div>
      <div class='item'></div>
      <div class='item'></div>
      <div class='item'></div>
      <div class='item'></div>
      <div class='item'></div>
      <div class='item'></div>
      <div class='item'></div>
    </div>
  </div>
</div>