div ignores its max height-CodePudding

I've got the following code:

.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 >
  <div ></div>
  <div >
    <div  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  style="background: red">
      <h4>Test</h4>
      <h4>Test</h4>
      <h4>Test</h4>
    </div>
  </div>
</div>

You can try it here: https://jsfiddle.net/mekgpd0u/5/

The size of the container div gets ignored. The sidebar does grow and the client area grows also. Why is that? I want the whole thing not to exceed the outer div. The Top and Bottom part of the sidebar should each only take up to 50% of the height provided by the outer div.

Edit: Thanks @Temani Afif Your suggestion worked for my minimal example but my real problem looks more like the following:

.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 >
  <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 >
      <div ></div>
      <div >
        <div  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  style="background: red">
          <h4>Test</h4>
          <h4>Test</h4>
          <h4>Test</h4>
        </div>
      </div>
    </div>
  </div>
</div>

I want the whole thing to be 100vh in height. the inner container should shrink in height when the yellow one needs more space and the green and red ones should never be higher than the viewer and each should not take more than 50% of the viewers height. The inner container should take all available height that is not occupied by the yellow div. I can't figure out how to do this :(

CodePudding user response：

define the size of one row instead of setting the height:

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

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

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

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

<div >
  <div ></div>
  <div >
    <div  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  style="background: red">
      <h4>Test</h4>
      <h4>Test</h4>
      <h4>Test</h4>
    </div>
  </div>
</div>

CodePudding user response：

The size of container div is not ignored, it only shows it's overflow. Add overflow: hidden; or overflow: scroll; to it's styles to fix your problem.