Html Question posted in
Some basic documentation can be found here.

Html – Div with horizontal scrollbar clipping content

the following html / css, which is a simplified version of my code clips the left side of the scrollable div when the width of the screen gets too narrow.

The horizontal scrollbar appears but you cannot scroll to the far left anymore.

Why does this happen?

.player {
    text-align: center;
    font-size: 12px;
    width: 9rem;
    border-width: 1px;
    border-color: black;
    border-style: solid;
}

.row {
    display: flex;
}

.container {
    overflow-x: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow-x: auto;
}

.player-container {
    display: flex;
}
    <main style="width: 400px">
        <div class="container">
            <div class="player-container">
                <p class="player">Preston Hilton</p>
            </div>
            <div class="player-container">
                <p class="player">Peregrine Jewell</p>
                <p class="player">Waldo Symons</p>
            </div>
            <div class="player-container">
                <p class="player">Seymour Nicholson</p>
                <p class="player">Sheard Tyler</p>
                <p class="player">Thomas Post</p>
            </div>
            <div class="player-container">
                <p class="player">Landen Dean/p></p>
                <p class="player">Koda Abbott</p>
                <p class="player">Quentin Berry</p>
                <p class="player">Anson Dickinson</p>
            </div>
            <div class="player-container">
                <p class="player">Oscar Kelsey</p>
                <p class="player">-</p>
                <p class="player">-</p>
                <p class="player">-</p>
                <p class="player">-</p>
            </div>
        </div>
    </main>
Tags:

2

Answers


  1. 0

    It looks like it’s not working because the element inside is too big for the scrollbox which could be fixed by increasing the size but it should also be possible to adjust it without using the resize option.
    Maybe the fix is not to use flex-direction: column, but I see you want to use that, and I’m not sure if it’s possible to do something like that without resizing, try to make your container bigger from 400px to something bigger, that might solve the problem.

    Login or Signup to reply.
  2. 0

    (Edited the Answer) Only if this works for you. See snippet below:

    Just add this to .container class: flex-wrap: wrap;

    .player {
    text-align: center;
    font-size: 12px;
    width: 9rem;
    border-width: 1px;
    border-color: black;
    border-style: solid;
}

.row {
    display: flex;
}

.container {
    overflow-x: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow-x: auto;
    flex-wrap: wrap;
}

.player-container {
    display: flex; 
}
    <main style="width: 400px">
        <div class="container">
            <div class="player-container">
                <p class="player">Preston Hilton</p>
            </div>
            <div class="player-container">
                <p class="player">Peregrine Jewell</p>
                <p class="player">Waldo Symons</p>
            </div>
            <div class="player-container">
                <p class="player">Seymour Nicholson</p>
                <p class="player">Sheard Tyler</p>
                <p class="player">Thomas Post</p>
            </div>
            <div class="player-container">
                <p class="player">Landen Dean/p></p>
                <p class="player">Koda Abbott</p>
                <p class="player">Quentin Berry</p>
                <p class="player">Anson Dickinson</p>
            </div>
            <div class="player-container">
                <p class="player">Oscar Kelsey</p>
                <p class="player">-</p>
                <p class="player">-</p>
                <p class="player">-</p>
                <p class="player">-</p>
            </div>
        </div>
    </main>

    Hope it helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search