0

I was reading this answer as it seems the most relevant for what I wish to do, but it doesn't seem to work when the body element is an overflow container.

Specifically in my case I have a dynamically sized header and a body. I would like the body to take up the remaining screen height. Normally this would be trivial but the body is an overflow one, and apparently this complicates things. I've included a reproduction of the problem below:

html, body {
  height: 100%;
  margin: 0;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.header {
  flex: 0 1 auto;
}

.content {
  flex: 1 1 auto;
  background-color: #ddd;
  height: 100%;
}

.items {
  overflow-y: auto;
  height: 100%;
}
<div class="box">
  <div class="header">
    <div class="header-item">header item</div>
    <div class="header-item">header item</div>
    <div class="header-item">header item</div>
  </div>
  <div class="content">
      fills remaining space
      <div class="items">
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
      </div>
  </div>
</div>

As you can see when you run it, there are two scrollbars, where there should only be one (for items). Is it possible to have content take up the remaining screen height such that there is no document scrollbar?

Ryan Peschel
  • 11,087
  • 19
  • 74
  • 136

2 Answers2

2

Adding overflow: auto to the .content seems to fix the problem

html, body {
  height: 100%;
  margin: 0;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.header {
  flex: 0 1 auto;
}

.content {
  flex: 1 1 auto;
  background-color: #ddd;
  height: 100%;
  overflow: auto;
}

.items {
  overflow-y: auto;
  height: 100%;
}
<div class="box">
  <div class="header">
    <div class="header-item">header item</div>
    <div class="header-item">header item</div>
    <div class="header-item">header item</div>
  </div>
  <div class="content">
      <div class="items">
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
        <div class="item">content item</div>
      </div>
  </div>
</div>
Ramon de Vries
  • 1,312
  • 7
  • 20
1

You may also use flex-grow:1 and shorten your CSS rules . overflow set on .content will make .content scroll when needed.

html,
body,
.box {
  height: 100%;
  margin: 0;
}

.box {
  display: flex;
  flex-flow: column;
}

.content {
  flex-grow: 1;
  background-color: #ddd;
  overflow-y: auto;
}
<div class="box">
  <div class="header">
    <div class="header-item">header item</div>
    <div class="header-item">header item</div>
    <div class="header-item">header item</div>
  </div>
  <div class="content">
    fills remaining space
    <div class="items">
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
    </div>
  </div>
</div>

If you wanted .items to scroll (what i understood from your question) , flex box can be imbricated if the scroll is needed a level lower, the method is the same and .content will fill remain space, then .items will fill also remaining space inside .content to finally scroll when needed :

html,
body,
.box {
  height: 100%;
  margin: 0;
}

.box,
.content {
  display: flex;
  flex-flow: column;
}

.content {
  height: auto;
  flex-grow:1;
  background-color: #ddd;
  min-height: 0;
}

.items {
  flex-grow:1;
  overflow-y: auto;
  background: lightgray;
}
<div class="box">
  <div class="header">
    <div class="header-item">header item</div>
    <div class="header-item">header item</div>
    <div class="header-item">header item</div>
  </div>
  <div class="content">
    fills remaining space
    <div class="items">
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
    </div>
  </div>
</div>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129