limit the height of a drawer to the max viewheight

March 30, 2022

I have the following layout and css:

.layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.appbar {
  background-color: blue;
  color: white;
}

.sidebar {
  flex-grow: 1;
  max-height: 94.6vh;
}

.drawer-container {
   height: 100%;
   display: flex;
}

.drawer {
    position: relative;
    background-color: #272b34;
    color: lightgray;
    border-style: none;
    align-self: stretch;
    overflow-y: auto;
}

.list {
  list-style: none;
  padding: 1rem;
}

.drawer-content {
    padding: 1rem 1rem 1rem 1rem;
    margin-top: 1px;
    align-self: stretch;
    background-color: #eef5f9;
    overflow: auto;
    flex: 1 1 auto;
}

.component {
    background-color: white;
    height: 100%;
    box-shadow: 0px 0px 3px 1px rgb(0 0 0 / 10%);
    overflow: auto;
    border-radius: 4px;
}

<div id="layout" class="layout">
  <div id="appbar" class="appbar">
    APPBAR
  </div>
  <div id="sidebar" class="sidebar">
    <div id="drawercontainer" class="drawer-container">
      <div id="drawer" class="drawer">
        <ul class="list">
          <li>item 1</li>
          <li>item 2</li>
          <li>item 3</li>
          <li>item 4</li>
          <li>item 5</li>
          <li>item 6<li>
          <li>item 7</li>
          <li>item 8</li>
          <li>item 9</li>
          <li>item 10</li>
          <li>item 11</li>
          <li>item 12</li>
          <li>item 13</li>
          <li>item 14</li>
          <li>item 15</li>
          <li>item 16</li>
          <li>item 17</li>
          <li>item 18</li>
          <li>item 19</li>
          <li>item 20</li>
          <li>item 21</li>
          <li>item 22</li>
          <li>item 23</li>
          <li>item 24</li>
          <li>item 25</li>
        </ul>
      </div>
      <div id="drawercontent" class="drawer-content">
        <div id="component" class="component">
          COMPONENT
        </div>
      </div>
    </div>
  </div>
</div>

As you see, I have a top level container (layout) with a height of 100vh. The sidebar is a list with expandable items, so, it can be, that the height of this will be greater, than 100vh. This is simulated with the 25 items. In order to keep the drawer content constant height, I have to limit the height of the sidebar (max-height: 94.6vh) and a scrollbar appears. The question is, how can I achieve the same result without fixing this max-height to 94.6vh?

Thanks.

>Solution :

Try using overflow-y property instead of max-height

.sidebar {
  flex-grow: 1;
  overflow-y: scroll;
}

.layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.appbar {
  background-color: blue;
  color: white;
}

.sidebar {
  flex-grow: 1;
  overflow-y: scroll;
}

.drawer-container {
   height: 100%;
   display: flex;
}

.drawer {
    position: relative;
    background-color: #272b34;
    color: lightgray;
    border-style: none;
    align-self: stretch;
    overflow-y: auto;
}

.list {
  list-style: none;
  padding: 1rem;
}

.drawer-content {
    padding: 1rem 1rem 1rem 1rem;
    margin-top: 1px;
    align-self: stretch;
    background-color: #eef5f9;
    overflow: auto;
    flex: 1 1 auto;
}

.component {
    background-color: white;
    height: 100%;
    box-shadow: 0px 0px 3px 1px rgb(0 0 0 / 10%);
    overflow: auto;
    border-radius: 4px;
}

<div id="layout" class="layout">
  <div id="appbar" class="appbar">
    APPBAR
  </div>
  <div id="sidebar" class="sidebar">
    <div id="drawercontainer" class="drawer-container">
      <div id="drawer" class="drawer">
        <ul class="list">
          <li>item 1</li>
          <li>item 2</li>
          <li>item 3</li>
          <li>item 4</li>
          <li>item 5</li>
          <li>item 6<li>
          <li>item 7</li>
          <li>item 8</li>
          <li>item 9</li>
          <li>item 10</li>
          <li>item 11</li>
          <li>item 12</li>
          <li>item 13</li>
          <li>item 14</li>
          <li>item 15</li>
          <li>item 16</li>
          <li>item 17</li>
          <li>item 18</li>
          <li>item 19</li>
          <li>item 20</li>
          <li>item 21</li>
          <li>item 22</li>
          <li>item 23</li>
          <li>item 24</li>
          <li>item 25</li>
        </ul>
      </div>
      <div id="drawercontent" class="drawer-content">
        <div id="component" class="component">
          COMPONENT
        </div>
      </div>
    </div>
  </div>
</div>