Apply height of fixed parent to child element-CodePudding

I have a container inside a parent with fixed position, and want to apply the same height of the parent element to that container. But the height: 100% is not applying. What am I missing here?

.fixed-container {
  position: fixed;
  width: 400px;
  top: 50px;
  max-height: calc(100% - 100px);
}

.list-container {
  height: 100%;
  overflow-y: scroll;
}

https://codepen.io/NoahWetjen/pen/dyjVbRX

CodePudding user response：

Ok. Just add display:flex; flex-direction:column to .fixed-container

.fixed-container {
  position: fixed;
  width: 400px;
  top: 50px;
  max-height: calc(100% - 100px);
  background: lightgreen;
  display:flex;
  flex-direction:column;
}

.list-container {
  height: 100%;
  overflow-y: scroll;
  background: rgba(0,0,0,.2);
}

<div >
  <div >
        <ul>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </div>
</div>

CodePudding user response：

change max-height to height so both elements have the same height

CodePudding user response：

To be honest i dont really understand what you want. is this what you are looking for?

.fixed-container {
  position: fixed;
  width: 400px;
  top: 50px;
  max-height: calc(100% - 100px);
  background: lightgreen;
  overflow:hidden
}

.list-container {
  height: inherit;
  overflow-y: scroll;
  background: rgba(0,0,0,.2);
}

<div >
  <div >
        <ul>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </div>
</div>