div игнорирует максимальную высоту

У меня есть такой код:

.container {
  display: grid;
  height: 300px;
  max-height: 300px;
  grid-template-columns: 1fr auto;
}

.clientArea {
  background: lightcoral;
  height: 100%;
  max-height: 100%;
}

.sidebar {
  width: 200px;
  height: 100%;
}

.top,
.bottom {
  max-height: 50%;
  overflow-y: auto;
}

<div class="container">
  <div class="clientArea"></div>
  <div class="sidebar">
    <div class="top" style="background: seagreen">
      <h4>Test</h4>
      <h4>Test</h4>
      <h4>Test</h4>
      <h4>Test</h4>
      <h4>Test</h4>
      <h4>Test</h4>
      <h4>Test</h4>
      <h4>Test</h4>
    </div>
    <div class="bottom" style="background: red">
      <h4>Test</h4>
      <h4>Test</h4>
      <h4>Test</h4>
    </div>
  </div>
</div>

Вы можете попробовать это здесь: https://jsfiddle.net/mekgpd0u/5/

Размер контейнера div игнорируется. Боковая панель растет, и клиентская область тоже растет. Это почему? Я хочу, чтобы все это не выходило за пределы внешнего div. Верхняя и нижняя части боковой панели должны занимать не более 50% высоты внешнего элемента div.

Изменить: спасибо @Temani Afif. Ваше предложение сработало для моего минимального примера, но моя реальная проблема больше похожа на следующее:

.outerContainer {
  background: gold;
  display: grid;
  grid-template-rows: 100vh;
}
.innerContainer {
  display: grid;
  grid-template-columns: 1fr auto;
}
.viewer {
  background: lightcoral;
}
.sidebar {
  width: 200px;
  height: 100%;
  display: grid;
}
.top,
.bottom {
  overflow-y: auto;
}

<div class="outerContainer">
  <div>
    <h4>Test</h4>
    <h4>Test</h4>
    <h4>Test</h4>
    <h4>Test</h4>
    <h4>Test</h4>
    <h4>Test</h4>
    <h4>Test</h4>
    <h4>Test</h4>

    <div class="innerContainer">
      <div class="viewer"></div>
      <div class="sidebar">
        <div class="top" style="background: seagreen">
          <h4>Test</h4>
          <h4>Test</h4>
          <h4>Test</h4>
          <h4>Test</h4>
          <h4>Test</h4>
          <h4>Test</h4>
          <h4>Test</h4>
          <h4>Test</h4>
        </div>
        <div class="bottom" style="background: red">
          <h4>Test</h4>
          <h4>Test</h4>
          <h4>Test</h4>
        </div>
      </div>
    </div>
  </div>
</div>

Я хочу, чтобы все это было высотой 100vh. внутренний контейнер должен уменьшаться по высоте, когда желтому требуется больше места, а зеленый и красный никогда не должны быть выше зрителя, и каждый не должен занимать более 50% высоты зрителя. Внутренний контейнер должен занимать всю доступную высоту, не занятую желтым div. Я не могу понять, как это сделать :(