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 f

Solution 1:

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: 11 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?

Solution 2:

I think overflow: scroll; will fix your problem.