How do I fix scrolling when flexbox content is vertically centered?

November 24, 2021

What I want to achieve is when the viewport is taller then the content, the content should be vertically centered. When the viewport is not tall enough and content overflows, parent should provide vertical scrollbar.

When I align flexbox content to the middle and I set the content to scroll it not only ignores content margins but also truncates at the top (given the viewport shorter than the content). Is there a way to fix this?

html, body {
    height: 100%;
}
body {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    overflow: hidden;
}
.container {
    overflow-y: auto;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
}

.content {
    border: 1px solid grey;
    background-color: lightgrey;
    padding: 10px;
    margin: 10px;
    border-radius: 10px;
}

<div class="container">
    <div class="content">
        Start of the content
        <br />
        <br />
        Middle of the content
        <br />
        <br />
        End of the content
    </div>
</div>
<div class="container">
    <div class="content">
        Start of the content :(((
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        Middle of the content
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        End of the content
    </div>
</div>

>Solution :

align-items: safe center should avoid children to go off the box .

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

safe

Used alongside an alignment keyword. If the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were start.

html, body {
    height: 100%;
}
body {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    overflow: hidden;
}
.container {
    overflow-y: auto;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: safe center;
}

.content {
    border: 1px solid grey;
    background-color: lightgrey;
    padding: 10px;
    margin: 10px;
    border-radius: 10px;
}

<div class="container">
    <div class="content">
        Start of the content
        <br />
        <br />
        Middle of the content
        <br />
        <br />
        End of the content
    </div>
</div>
<div class="container">
    <div class="content">
        Start of the content :(((
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        Middle of the content
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        End of the content
    </div>
</div>

If your browser doesn’t support safe/unsafe keywords on alignment , then you can use auto margin :

html, body {
    height: 100%;
}
body {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    overflow: hidden;
}
.container {
    overflow-y: auto;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row; 
    padding:10px 0;
}

.content {
    border: 1px solid grey;
    background-color: lightgrey;
    padding: 10px;
    margin:auto 10px;
    border-radius: 10px;
}

<div class="container">
    <div class="content">
        Start of the content
        <br />
        <br />
        Middle of the content
        <br />
        <br />
        End of the content
    </div>
</div>
<div class="container">
    <div class="content">
        Start of the content :(((
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        Middle of the content
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        End of the content
    </div>
</div>