Full height flexbox, grow with content

Question

I have a basic two-column flexbox layout (side menu, title, main content).

I want my sidebar to have a fixed width, but increase in height to 100% of the entire page. For my main content, there is a fixed height header and a content area with dynamic height, I want the background of this panel to also fill 100% of the available height.

• If the screen height is high enough to contain all the content, everything works fine.
• If the screen height cannot contain everything (for example: scrolling is required), then 1) the background of the menu only decreases to the bottom of the original viewport, and 2) the main background of the content is lower [but still not full height], because the title clicks on it .

When the main content goes past the available height and requires scrolling, the background does not extend to the end of the page

Looking at the intersection between the black, gray and the console window ... the left side of the black bg is a menu with static content, the right side of the gray bg is the main content with growing content, the bottom white bg on the second two images is wtf?

• Before loading data without scrolling down
• Before loading data scroll down to the bottom of the page
• After loading data, scroll down to the bottom of the page

I can’t say if 100% height is attached to html, the body actually does something, since deleting them does not change the behavior, it’s still the same as the screenshots below.

See the script here.

.flex-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.flex-row.flex-fill {
  height: 100%;
}

.flex-col {
  display: flex;
  flex-direction: column;
  flex-flow: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.flex-col.flex-fill {
  width: 100%;
}

.flex-right {
  margin-left: auto;
}

.menu {
  width: 200px;
  background-color: blue;
  color: $white;
  padding: 15px;
  height: 100%;
  flex-grow: 1;
}

.header {
  background-color: red;
  padding: 15px;
  font-family: italic;
  font-size: 1.5em;
}

.main-content {
  background-color: green;
  height: 100%;
  flex-grow: 1;
  padding-bottom: 30px;
}

<div class="flex-row flex-fill">
  <div class="flex-col">
    <div class="menu">
      <ul>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
        <li>menu item</li>
      </ul>
    </div>
  </div>

  <div class="flex-col flex-fill">
    <div class="header">header</div>
    <div class="main-content">main content</div>
  </div>
</div>

Run code

Answer 1

, :

-, height: 100% flex , . html, body { height: 100%; }.

-, height: 100% 100%. .

* { box-sizing: border-box; }

html { height: 100%; }

body {  
    min-height: 100%;
    display: flex;
    margin: 0;
    padding: 0; 
}

.flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100%;
}