Flex-box: 3 columns of same height with page scroll

Question

I am new to Flexbox and I am working on a 3-column layout.

This is what I am targeting:

3 columns
Each 100% height
Variable content height in each
If content is taller than user's screen the page should scroll
Columns should stay the same height

This is my HTML code:

<html>
    <head>
        <title>
            FlexBox
        </title>
        <link rel="stylesheet" href="./styles.css">
    </head>
    <body>
        <div class="container">
            <div class="cols">
                1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
                1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
                1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
                1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
                1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
                1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
            </div>
            <div class="cols">
                text
            </div>
            <div class="cols">
                text
            </div>
        </div>
    </body>
</html>

and CSS:

body, html {
    background-color: seashell;
    margin: 0;
}

.container {
    display: flex;
    justify-content: center;
    height: 100%;
}

.container .cols {
    flex: 1 0 auto;
    background-color: burlywood;
    margin: 10px 10px 0 10px;
    padding: 10px;
}

What happens in this case is content overflows the column (that gets 100% of screen height):

What I have tried to fix it:

Remove height: 100% from .container: It leads to right look when content is tall and stretches the column, but if the content is small - columns will not be 100% screen height. So it does not work for me.
Adding align-items: flex-start to .container: So now content stretches the column but, again, if content is small none of columns 100% screen height.

How can I fix it?

PS: Strange thing, when I tried this example in jsfiddle it works as expected but when I run it in my browser - i get what's described above.

Thanks!

Use `min-height: 100vh` and items will fill the viewport even with less content ... https://jsfiddle.net/3h6tgncj/ — Asons, Nov 20 '17 at 07:58

Cons7an7ine · Accepted Answer · 2017-11-20T08:14:18.783

1

Change height:100% to min-height:100% of .container, also add height:100% to body, html

.container {
    display: flex;
    justify-content: center;
    min-height: 100%;
}

body, html {
    background-color: seashell;
    margin: 0;
    height: 100%
}

edited Nov 20 '17 at 08:14

answered Nov 20 '17 at 06:50

Cons7an7ine

708
6
17

score -1 · Answer 2 · answered Nov 20 '17 at 06:54

Add a max-height on container. and overflow scroll on column

body, html {
    background-color: seashell;
    margin: 0;
}

.container {
    display: flex;
    justify-content: center;
    height: 100%;
    max-height: 100vh;
}

.container .cols {
    flex: 1 0 auto;
    background-color: burlywood;
    margin: 10px 10px 0 10px;
    padding: 10px;
    
    overflow: scroll;
}

<div class="container">
  <div class="cols">
    1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
    1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
    1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
    1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
    1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
    1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
  </div>
  <div class="cols">
    text
  </div>
  <div class="cols">
    text
  </div>
</div>

Yup, I need scroll to appear for whole page, not individual columns... but thanks for attention. — SmxCde, Nov 20 '17 at 21:26

Flex-box: 3 columns of same height with page scroll

2 Answers2