w-- w-- - 2 months ago 26
CSS Question

Nested flexbox with 100% height and scrollbar on element (not browser)

I'm attempting to create a layout that looks like this

http://jsfiddle.net/ch7n6/907/

relevant css:

html, body {
//height: 100%;
}

#outer_container{
display:flex;
flex-direction:row;
}

#outer1{
flex: 1 0 auto;
}

#outer2{
flex: 1 0 auto;
}

#container {
display: flex;
flex-direction: column;
height: 100%;

width: 50%;
background-color: red;
}

#container header {
background-color: gray;
}

#container article {
flex: 1 1 auto;
overflow-y: auto;
height: 0px;
}

#container footer {
background-color: gray;
}


it was originally based on the answer to this question:

Flexbox and vertical scroll in a full-height app using NEWER flexbox api

How do I make the article container auto grow to consume the remaining vertical space below it but the scroll bar to remain only for that element. i.e. i want only the inside of article to scroll and not the entire browser window.

Is there a pure css solution? or do i need javascript to detect the size of the browser window and adjust the height property of article dynamically?

Answer

You can try setting position:fixed to your outer container (http://jsfiddle.net/ch7n6/909/):

#outer_container{
display:flex;
flex-direction:row;
top:0;
bottom:0;
position:fixed;
}

If it doesn't work for your design, you can change the container dimensions using window.onresize event.

Comments