Expand div to fill entire screen vertically

My goal is to exapand sidebar__container to fill the entire vertible height of the screen. However, it seems to only be expanding to about 30% of the screen height.

I tried to use flex: 1 but that doesn't seem to make it work. Here is my code:

function Sidebar() {
  return (
    <div className="sidebar">
      <div className="sidebar__container">
        <div className="sidebar__optionContainer">
          <Link to="/dashboard">
            <SidebarOption Icon={HomeIcon} text="Dashboard" />
          </Link>
          <h6>Appearance</h6>
          <Link to="/themes">
            <SidebarOption Icon={TokensIcon} text="Themes" />
          </Link>
          <Link to="/themes">
            <SidebarOption Icon={LayersIcon} text="Gallery" />
          </Link>
        </div>
        <div className="sidebar__optionContainer">
          <h1>Help</h1>
        </div>
      </div>
    </div>
  );
}

And here is my css code:

.sidebar__container {
  padding: 0px 20px;
  padding-top: 20px;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
}

from Recent Questions - Stack Overflow https://ift.tt/33hKpDj
https://ift.tt/2UZUIHK