How to fix height the content inside a div with flex css

Question

Following to this answer, I am trying to create a perfect height for my content, But the content height is overflowing instead of getting a scroll over content. I have created a fiddle for this scenario. Please help me fix my content height such a way that top content and always visible and scroll-able downward.

fiddle

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

.box {
    display: flex;
    flex-flow: column;
    height: 100%;
}

.box .row {
    border: 1px dotted grey;
}

.box .row.header {
    flex: 0 1 auto;
}

.box .row.content {
    display: flex;
    flex-flow: column;
    flex: 1 1 auto;
    overflow-y: auto;
    justify-content: center;
    align-items: center;
}

.data {
    width: 80%;
    min-height: 400px;
}

.box .row.footer {
    flex: 0 1 40px;
}

HTML.

<head>
    <link href="./test.css" rel="stylesheet">
</head>

<body>
    <div class="box">
        <div class="row header">
            <p>
                <b>header</b>
                <br />
                <br />(sized to content)</p>
        </div>
        <div class="row content">
            <div class="data">
                invisible box1
            </div>
            <div class="data">
                visible box2
            </div>
            <div class="data">
                visible box3
            </div>
            <p>
                <b>Bottom Box is visible with scroll.</b> (fills remaining space)
            </p>
        </div>
        <div class="row footer">
            <p>
                <b>footer</b> (fixed height)</p>
        </div>
    </div>
</body>

</html>

As this works for me on Firefox and Chrome, which browser do you use? — Asons, Jan 26 '18 at 13:39
chrome only latest. Please see the fiddle, Are you able to see, first div? — Vijay Shanker Dubey, Jan 26 '18 at 13:40
Possible duplicate of [How to use safe center with flexbox?](https://stackoverflow.com/questions/47635911/how-to-use-safe-center-with-flexbox) — Asons, Jan 26 '18 at 13:45

Asons · Accepted Answer · 2018-01-26T13:59:04.913

The issue you encounter is caused by justify-content: center in the .box .row.content rule.

Remove it and your text will overflow properly.

.box .row.content {
    display: flex;
    flex-flow: column;
    flex: 1 1 auto;
    overflow-y: auto;
    /*justify-content: center;              removed  */
    align-items: center;
}

Updated fiddle

This is the default behavior for justify-content: center, where, on a flex column container, when the content overflow, it will overflow both at its top and bottom.

Read more here, where you find resources and a workaround:

How to use safe center with flexbox?

score 0 · Answer 2 · edited Jan 26 '18 at 14:27

0

I think overflow: scroll; will fix your problem.

edited Jan 26 '18 at 14:27

Asons

84,923
12
110
165

answered Jan 26 '18 at 13:38

EgMusic

136
17

Nope, that won't solve anything. Check my answer if you want to know more. – Asons Jan 26 '18 at 14:28

How to fix height the content inside a div with flex css

2 Answers2

Linked