css flexbox layout - how to scroll the inner container?

Question

I am trying to create a flex box based html layout as below (refer the picture). The viewport to have 3 rows (flex-direction: column)
- top - "main header"
- middle - "home"
- bottom - "main footer"

Then "home" to have a left side "menu" and a "container" to the right.

"container" to have
- top "container-header"
- middle "box container"
- botton "container-footer"

The middle "box container" needs to be scrollable.

I could get the layout properly. Please see the codepen.

Here is the code snippet.

html, body {
 height: 100%;
 overflow: hidden;
 margin: 0;
  }
  
  .window {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 height: 100%;
  }
  
  .header {
 display: flex;
 flex-direction: row;
 justify-content: space-between;
  }
  
  .footer {
 display: flex;
 flex-direction: row;
 justify-content: center;
 background-color: cyan;
  }
  
  .home {
 display: flex;
 flex-direction: row;
 flex: 1;
 min-height: 0;
  }
  
  .menu {
 width: 200px;
 border: 1px solid green;
 flex-shrink: 0;
  }
  .container {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 overflow: auto;
 flex: 1;
 border: 1px solid blue;
  }
  .container-header {
   width: 100%;
   text-align: center;
 background-color: purple;
  }
  .container-footer {
 text-align: center;
 background-color: mediumslateblue;
  }
  .box-container {
 display: flex;
 justify-content: space-between;
 overflow: auto;
 border: 1px green solid;
  }
  .box {
 width: 600px;
 height: 600px;
 margin: 10px;
 background-color: red;
 text-align: center;
 padding: 5px;
 flex-shrink: 0;
  }

<html>
 <head>
  <link rel="stylesheet" href="./style.css">
 </head>
 <body>
  <div class="window">
   <div class="header">
    <div>Left</div>
    <div>Right</div>
   </div>
   <div class="home">
    <div class="menu">
     menu
    </div>
    <div class="container">
     <div class="container-header">
      Container Header
     </div>
     <div class="box-container">
      <div class="box">
      box - 1
      </div>
      <div class="box">
      box - 2
      </div>
      <div class="box">
      box - 3
      </div>
     </div>
     <div class="container-footer">
      Container Footer
     </div>
    </div> 
   </div>
   <div class="footer">
    <div>Left</div>
    <div>Right</div>
   </div>
  </div>
 </body>
<html>

But there is something, I am not able to comprehend.

To get the "box container" scrollable, I thought setting the overflow of the "box container" to auto will do the job.
But it seems, that alone won't do the job. I have to set the overflow of the "container" also auto, to make the "box container" scrollable.
In fact, it is required to set the overflow to auto, for both the "container" and "box container".

Why it is like that?

score 2 · Answer 1 · answered Aug 09 '18 at 10:26

It's because the first container is also overflowing its container that's why overflow:auto is needed.

To avoid this you need to add min-width:0 to the container so that you make only its inner content to overflow and in this case you only need overflow:hidden on the box-container

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

.window {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: cyan;
}

.home {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
}

.menu {
  width: 200px;
  border: 1px solid green;
  flex-shrink: 0;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width:0;
  flex: 1;
  border: 1px solid blue;
}

.container-header {
  width: 100%;
  text-align: center;
  background-color: purple;
}

.container-footer {
  text-align: center;
  background-color: mediumslateblue;
}

.box-container {
  display: flex;
  justify-content: space-between;
  overflow: auto;
  border: 1px green solid;
}

.box {
  width: 600px;
  height: 600px;
  margin: 10px;
  background-color: red;
  text-align: center;
  padding: 5px;
  flex-shrink: 0;
}

  <div class="window">
    <div class="header">
      <div>Left</div>
      <div>Right</div>
    </div>
    <div class="home">
      <div class="menu">
        menu
      </div>
      <div class="container">
        <div class="container-header">
          Container Header
        </div>
        <div class="box-container">
          <div class="box">
            box - 1
          </div>
          <div class="box">
            box - 2
          </div>
          <div class="box">
            box - 3
          </div>
        </div>
        <div class="container-footer">
          Container Footer
        </div>
      </div>
    </div>
    <div class="footer">
      <div>Left</div>
      <div>Right</div>
    </div>
  </div>

Can u explain how adding min-width:0 to container makes inner content to overflow? — Gautam Naik, Aug 09 '18 at 10:53
min-width won't make inner content to overflow it will prevent container to overflow ... a flex item has a default value of min-width equal to width of it's content so in this case container and inner content have the same width so only container is overflowing .. adding min-width will make the container width:100% thus it content will overflow — Temani Afif, Aug 09 '18 at 10:59

css flexbox layout - how to scroll the inner container?

1 Answers1