PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Wednesday, November 16, 2022

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

 November 16, 2022     css, scroll, vertical-alignment     No comments   

Issue

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>



Answered By - G-Cyrillus
Answer Checked By - Pedro (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing