This question is almost the same question as How can I combine flexbox and vertical scroll in a full-height app but with a twist: I have content in two columns, which I believe it breaks height:0 directive.
My desired layout should look like this:
with 100vh height app container and only content with a lot of lines with scrollbar. I can achieve this behavior without left column (the same as in related question). The final solution will be using bootstrap4, so I would like to avoid display: grid if possible.
As you can see I need to specify height on the right container column which kills the whole flex idea, specifying it as height: 0 kills the flex element to 0.
My test html:
html, body {
height: 100%;
}
#main {
display:flex;
flex-direction: column;
}
#row1 {
flex: none;
background-color: yellow;
}
#row2 {
display: flex;
flex-direction: row;
flex: 1;
background-color: cyan;
}
#left {
background-color: orange;
}
section {
width: 50%;
}
#container {
display: flex;
flex-direction: column;
width: 50%;
background-color: red;
height: 190px;
}
#container header {
background-color: gray;
flex: none;
}
#container article {
flex: 1 1 auto;
overflow-y: auto;
min-height: 0;
}
#container footer {
background-color: gray;
flex: none;
}<div id="main">
<div id="row1">
header
</div>
<div id="row2">
<section id="left">
left column
</section>
<section id="container" >
<header id="header" >This is a header</header>
<article id="content" >
This is the content that
<br />
With a lot of lines.
<br />
With a lot of lines.
<br />
This is the content that
<br />
With a lot of lines.
<br />
<br />
This is the content that
<br />
With a lot of lines.
<br />
<br />
This is the content that
<br />
With a lot of lines.
<br />
</article>
<footer id="footer" >This is a footer</footer>
</section>
</div>
</div>What are the ways to achieve this (with using bootstrap4 layout system)?
JS Fiddle: http://jsfiddle.net/98jmz7d5/
