CODEWITHSUNDEEP
htmlcssflexbox
Hunter Estrada
Hunter Estrada

Reputation: 41

Prevent Items in Scrollable Flex Div from Shifting Page Layout

I'm having an issue when trying to space out my buttons within a scrollable flex div which is causing a page layout shift. Here's an img of my site without any margins or separation between the buttons, and the code for the div and buttons:

#slideshow div {
       display: flex;
        justify-content: space-between;
        align-items: center;
        width: 85%;
        overflow-x: scroll;
        overflow-y: hidden;
        background-color: blueviolet;
    }

    #slideshow button {
        padding: 10px;
        border: none;
        border-radius: 8px;
        background-color: whitesmoke;
        font-family: Poppins;
        box-shadow: var(--shadow);
    }

    /* prevents hovering from causing the buttons to jitter on larger screens */
    #slideshow button::before {
        display: block;
        content: attr(data-text);
        font-weight: bold;
        height: 0;
        overflow: hidden;
        visibility: hidden;
    }
    <section id="slideshow">
        <img src="images/matches_snippet.png" alt="Placeholder" />
        <p> Matches are... Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus deserunt vel modi aliquam placeat at accusantium minus ab illum incidunt. </p>
                            
        <div>
            <button data-text="Matches">Matches</button>
            <button data-text="Games">Games</button>
            <button data-text="Profile">Profile</button>
            <button data-text="Messaaging">Messaging</button>
            <button data-text="Likes">Likes</button>
        </div>
</section>

enter image description here

However, when adding left and/or right margins to my buttons it causes the entire page to have this extra space on the right side and makes the entire site horizontally scrollable.:

enter image description here:

How can I separate the buttons here without creating this extra space on the side? I don't even understand why items in the scrollable container are causing layout shifts on the whole page to begin with.

Appreciate the help, thanks.

Upvotes: 1

Views: 176

Answers (1)

Suryansh Singh
Suryansh Singh

Reputation: 1173

Just Use gap property in flex-parent.

The gap property in CSS is a shorthand for row-gap and column-gap, specifying the size of gutters, which is the space between rows and columns within grid, flex, and multi-column layouts.

Edit: Add box-sizing: border-box; to your body tag.

body{
    margin:0;
    padding:0;
    box-sizing: border-box;
  }

Upvotes: 1

Related Questions