1

Is it possible to make a div with a height of 100%, and have the inner item that overflows scroll.

It sounds like a simple problem (and it might be), but I have been thinking about it for days. Some things that don't work in my specific case are:

  1. height: calc(100% - xx px), because the header is of a variable height.
  2. Putting all high children as direct children in the wrapper component (I use a component that has some layers
<div class="wrapper">
  <div class="header">
    A header
  </div>
  <div class="container">
    A container
    <div class="with-many">
      Don't scroll
      <div class="divs">
         Scroll
      </div>
    </div>
  </div>
</div>

.wrapper {
  width: 80vw;
  height: 80vh;
  background-color: lightgrey;

  * {
    width: 100%;
  }

  .header {
    height: 30px;
    background-color: orange;
  }

  .container {
    height: 100%;
    background-color: lightgreen;

    .with-many {
      height: 100%;
      overflow-y: auto;
      background-color: green;

      .divs {
        height: 400vh;
        background-color: blue;
      }
    }
  }
}

https://jsfiddle.net/zdb8pmuL/1/

CarbonvanE
  • 182
  • 2
  • 9
  • Use `overflow: auto` on wrapper. – Vepth May 31 '20 at 22:20
  • Does this answer your question? [Making a div vertically scrollable using CSS](https://stackoverflow.com/questions/9707397/making-a-div-vertically-scrollable-using-css) – Vepth May 31 '20 at 22:23
  • But then everything in `.wrapper` will will scroll. If I put it on `.with-many`, as in my example, that div will also scroll. I try to let only the `.divs` scroll. – CarbonvanE May 31 '20 at 22:24
  • Then put overflow on `.container` – Vepth May 31 '20 at 22:36

1 Answers1

0

Do you mean like this?:

.wrapper {
  width: 80vw;
  height: 80vh;
  background-color: lightgrey;
}

.wrapper * {
  width: 100%;
}

.header {
  height: 30px;
  background-color: orange;
}

.container {
  height: 100%;
  background-color: lightgreen;
  display: flex;
  flex-direction: column;
}

.with {
  height: 100%;
  background-color: green;
}

.another-wrapper {
  overflow-y: scroll;
  height: 100%;
}

.divs {
  height: 400vh;
  
  background-color: blue;
}
<div class="wrapper">
  <div class="header">
    A header
  </div>
  <div class="container">
    A container
    <div class="with">
      With many
      <div class="another-wrapper">
        <div class="divs">
          nested divs
        </div>
      </div>
    </div>
  </div>
</div>
Caleb
  • 105
  • 2
  • 10
  • Thank you for your response! This solution has the same problem as that of @vepthy though, all inner containers scroll, I only want the blue container to scroll. Do you know if this is possible? – CarbonvanE May 31 '20 at 22:33
  • Thanks! I just now see that I made a grave error in my initial question, the problem is that the height of all nested divs should be `max-height`, since I only want the component to not be larger than the outer wrapper, but smaller is fine. When I update your working example with heights to max-heights it stops working, do you know why? – CarbonvanE Jun 01 '20 at 07:36