Flexbox layout overflowing window

Question

Created a simple flexbox layout with 2 rows, 1 header row, 1 main content, with second row containing 2 cols, 1 of which I wanted to stretch 100% to height of window (so it could have scrollable items) and the 2nd col sat to the right for content (again scrollable). I've set html, body to:

height: 100%; margin: 0; overflow: hidden;

to help achieve the layout.

Everything seems fine apart from the layout pushes off the bottom of the window to the height of the header. If I remove the header no content is pushed out of view.

Is it possible to keep the header row and make the second row stay within the window?

jsFiddle to try and illustrate the issue.

score 3 · Accepted Answer · answered May 22 '20 at 12:45

Flex items by default have a minimum height/width equal to content, In other words a flex item cannot be smaller than it's content.

To override that behaviour use min-height:0; to .sectionRow2

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

.page {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
}

.sectionRow1 {
  display: flex;
  flex-direction: row;
  flex-grow: 0;
  background-color: yellow;
  border-bottom: 1px solid silver;
}

.sectionRow2 {
  min-height: 0;
  /* New */
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  background-color: blue;
  height: 100%;
}

.sectionRow2Col1 {
  display: flex;
  flex-direction: column;
  background-color: silver;
  border-right: 1px solid silver;
  width: 250px;
  height: 100%;
}

.sectionRow2Col2 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
  background-color: lightgrey;
}

.menuitems {
  flex: 1 1 auto;
  overflow-y: auto;
  height: 100%;
}

.menufoot {
  display: flex;
  background-color: lavender;
  height: 40px;
}

.link {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 4px 4px 4px 4px;
  font-size: .9rem;
  background-color: white;
  border-bottom: 1px solid silver;
}

.content {
  display: flex;
  flex-grow: 1;
  align-items: stretch;
  overflow-y: auto;
}

.headerlogo {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 48px;
  width: 250px;
}

<div class="page">

  <header class="sectionRow1">
    <div class="headerlogo">
      <a href="#">Header</a>
    </div>
  </header>

  <section class="sectionRow2">
    <nav class="sectionRow2Col1">
      <div class="menuitems">
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
        <a href="#" class="link">Link</a>
      </div>
      <div class="menufoot">Footer</div>
    </nav>

    <section class="sectionRow2Col2">
      <div class="content">
        Content..
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /> Content..
      </div>
    </section>

  </section>

</div>

Flexbox layout overflowing window

1 Answers1