CODEWITHSUNDEEP
htmlcssflexbox
Vijay Shanker Dubey
Vijay Shanker Dubey

Reputation: 4418

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

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>

Upvotes: 0

Views: 2575

Answers (2)

EgMusic
EgMusic

Reputation: 134

I think overflow: scroll; will fix your problem.

Upvotes: 0

Asons
Asons

Reputation: 87191

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:

Upvotes: 1

Related Questions