CSS Flexbox Design Issues

Question

I have two separate codes that I worked with, one with the main location of the site that works great, and the second is the component that I would like to add to the left sidebar of the main layout.

The component works fine when inside the container with a set height it will shrink and stretch the way I want, if inside this type of parent div.

When I add a component to the main layout, but it extends the left sidebar, breaking the perfect layout, I want the main layout to be the size of the current browser window, and the page will never scroll. is there any way to tell these .layout-left " .layout-left " " .layout-stage " and " .layout-right " so as not to expand?

Here are the codes I talked about:

Working with the main layout: http://codepen.io/AlexBezuska/pen/KwOagy

Work panel: http://codepen.io/AlexBezuska/pen/ZYgWYp

Combined (not working): http://codepen.io/AlexBezuska/pen/LEwGJj

CSS Layout I use:

 body { display: flex; min-height: 100vh; flex-direction: column; width: 100%; margin: 0 auto; } .layout-middle{ display: flex; flex: 1; } .layout-stage{ flex: 1 0 320px; background: #ffc94e; } .layout-left, .layout-right{ flex: 0 0 320px; background: #c9ea5d; } .layout-left{ background: #85d6e4; } .layout-header{ height: 100px; background: #92e4c9; } .layout-footer{ height: 150px; background: #f7846a; } 

Answer 1

You currently have .layout-header , .layout-middle and .layout-footer to fill the available vertical space, the problem is the length of the content inside .layout-left . There are several ways to stop the contents of a .layout-left spilling out of a container.

Overflow method

By adding .overflow-y: auto; in .layout-left , you can make sure that the scroll bar is displayed if its content is greater than its height, stopping the content from spreading.

 .panel { display: flex; flex-flow: column; /*padding: 1em;*/ overflow: hidden; flex: 1;/*Add this*/ } header { min-height: 32px;/*Add this*/ height: 32px; /*must be 32px*/ background: #c0c0c0; } footer { background: #cfcfcf; height: 32px;/*must be 32px*/ } .select-list { /*flex: 1;*/ overflow-y: scroll; /*max-height:16vh; Remove this*/ } .select-list-item { background: white; border: 1px solid black; height: 32px;/*must be 32px*/ } /*===============================================*/ body { display: flex; min-height: 100vh; max-height: 100vh; flex-direction: column; width: 100%; margin: 0 auto; } .layout-middle { display: flex; flex: 1; } .layout-stage { flex: 1 0 320px; background: #ffc94e; } .layout-left, .layout-right { flex: 0 0 320px; background: #c9ea5d; } .layout-left { background: #85d6e4; overflow-y: auto;/*Add this*/ } .layout-header { height: 100px;/*must be 100px*/ background: #92e4c9; } .layout-footer { height: 150px;/*must be 150px*/ background: #f7846a; } 

 <div class="layout-header"> <h1></h1> </div> <div class="layout-middle"> <div class="layout-left"> <!-- start content --> <div class="panel"> <header>panel header</header> <div class="select-list" id="select-list"> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> </div> <footer></footer> </div> <div class="panel"> <header>Entities</header> <div class="select-list" id="select-list"> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> </div> <footer></footer> </div> <div class="panel"> <header>Entities</header> <div class="select-list" id="select-list"> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> </div> <footer></footer> </div> <!-- end content --> </div> <main class="layout-stage"> <h2>stage</h2> </main> <aside class="layout-right"> <h2>right</h2> </aside> </div> <div class="layout-footer"> <h2>Footer</h2> </div> 

http://codepen.io/anon/pen/gppPrp

Flex method

By adding display: flex; and flex-direction: column; in .layout-left , you can get its contents according to available space.

 .panel { display: flex; flex-flow: column; /*padding: 1em;*/ overflow: hidden; flex: 1;/*Add this*/ } header { min-height: 32px;/*Add this*/ height: 32px;/*must be 32px*/ background: #c0c0c0; } footer { background: #cfcfcf; height: 32px;/*must be 32px*/ } .select-list { /*flex: 1;*/ overflow-y: scroll; /*max-height:16vh; Remove this*/ } .select-list-item { background: white; border: 1px solid black; height: 32px;/*must be 32px*/ } /*===============================================*/ body { display: flex; min-height: 100vh; max-height: 100vh; flex-direction: column; width: 100%; margin: 0 auto; } .layout-middle { display: flex; flex: 1; } .layout-stage { flex: 1 0 320px; background: #ffc94e; } .layout-left, .layout-right { flex: 0 0 320px; background: #c9ea5d; } .layout-left { background: #85d6e4; display: flex;/*Add this*/ flex-direction: column;/*Add this*/ } .layout-header { height: 100px;/*must be 100px*/ background: #92e4c9; } .layout-footer { height: 150px;/*must be 150px*/ background: #f7846a; } 

 <div class="layout-header"> <h1></h1> </div> <div class="layout-middle"> <div class="layout-left"> <!-- start content --> <div class="panel"> <header>panel header</header> <div class="select-list" id="select-list"> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> </div> <footer></footer> </div> <div class="panel"> <header>Entities</header> <div class="select-list" id="select-list"> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> </div> <footer></footer> </div> <div class="panel"> <header>Entities</header> <div class="select-list" id="select-list"> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> <div class="select-list-item selected">0: bg</div> </div> <footer></footer> </div> <!-- end content --> </div> <main class="layout-stage"> <h2>stage</h2> </main> <aside class="layout-right"> <h2>right</h2> </aside> </div> <div class="layout-footer"> <h2>Footer</h2> </div> 

http://codepen.io/anon/pen/qddEoz

Answer 2

Fixed CodePen (also works in Firefox)

I made 3 changes:

1) I set the body height for the desired:

 body { height: 100vh; } 

2) I gave the left container the correct boxing model:

 .layout-left, .layout-right{ display: flex; flex-direction: column; } 

3) To prevent the panels from overflowing in Firefox, I added the following:

 div { min-height: 0; } 

This last parameter is explained in this question by a developer who works on a flexible model in Mozilla. Of course, you'd better set it only in the appropriate parent divs, but that was easier.

Answer 3

I want the main layout to be the size of the current browser window, and the page should never scroll.

In this case, you also need to set max-height for elements, at least for layout-middle .

Answer 4

.layout-left requires display: flex; and flex-flow: column; I also added a .container wrapper with display: flex; flex-direction: column; height: 100vh; display: flex; flex-direction: column; height: 100vh; and removed most of the properties from the body. forked pen: http://codepen.io/oosby/pen/GJJqvP