2-я колонка заполнить оставшуюся высоту экрана не работает

Question

У меня есть панель навигации с фиксированной высотой, под диваном control с фиксированной высотой и ниже, у меня есть еще один div calendar. календарь прокручивается Я хочу, чтобы высота календаря оставалась высотой экрана ниже control и нижней части экрана. Таким образом, окно не прокручивается, прокручивается только календарь. Однако настройка height: 100% не работает и flex: 1 также.

Это то, что у меня есть, когда я устанавливаю высоту calendar на фиксированную высоту, но, как я объяснил, я хочу, чтобы высота была остальной частью размера экрана.

Есть идеи?

.navbar {
  height: 50px;
  background-color: indianred;
}

.window {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.control  {
  height: 100px;
  background: khaki;
}

.calendar {
  height: 200px;
  width: 100%;
  bottom: 0;
  left: 0;
}

.wrapper {
  position: relative;
  background-color: lightgray;
  width: 100%;
  height: 100%;
  overflow: scroll;
}

.main {
  width: 1500px;
  height: 1500px;
  background-color: rosybrown;
  display: flex;
  flex-direction: column;
}

<nav class="navbar"></nav>
<div class="window">

  <div class="control">

  </div>
  
  <div class="calendar">
    <div class="wrapper">
      <div class="main">
  
        

      </div>
    </div>
  </div>

</div>

Answer 1

Запустите этот код ниже: я использовал height: calc() метод полной высоты экрана минус 150 пикселей для навигации и управления.

.navbar {
  height: 50px;
  background-color: indianred;
}

.window {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.control {
  height: 100px;
  background: khaki;
}

.calendar {
  height: calc(100vh - 150px);
  width: 100%;
  bottom: 0;
  left: 0;
}

.wrapper {
  position: relative;
  background-color: lightgray;
  width: 100%;
  height: 100%;
  overflow: scroll;
}

.main {
  width: 1500px;
  height: 1500px;
  background-color: rosybrown;
  display: flex;
  flex-direction: column;
}

<nav class="navbar"></nav>
<div class="window">
  <div class="control">
  </div>
  <div class="calendar">
    <div class="wrapper">
      <div class="main">
      </div>
    </div>
  </div>
</div>