Horizontal scroll to left

Question

I have a web page that sequentially adds various sizes of fixed width panels (flex: none) from left to right as the user drills down. When the panels reach (or will overreach) the end of the page I want the first panel (and subsequent panels) to 'scroll' to the left (overflow hidden is acceptable, partial content visible is ok)

Originally aligned left as follows when panel ONE then TWO, etc is added

=============================================================
=                                                            =
= -----------  ----------- -----------  -----------          =
= |         |  |         | |         |  |         |          =
= |   ONE   |  |   TWO   | |  THREE  |  |  FOUR   |          =
= |         |  |         | |         |  |         |          =
= -----------  ----------- -----------  -----------          =
=                                                            =
==============================================================

Then when FIVE is added it will overreach the end of the page so panel ONE is scrolled out of view (overflow hidden is ok)

=============================================================
=                                                           =
=--    -----------  ----------- -----------  -----------    =
=  |   |         |  |         | |         |  |         |    =
=  |   |   TWO   |  |   THREE | |  FOUR   |  |  FIVE   |    =
=  |   |         |  |         | |         |  |         |    =
=--    -----------  ----------- -----------  -----------    =
=                                                           =
=============================================================

Conversely, when panel FIVE (or any other) is removed, then ONE should go back into view.

So far I have this:

<div class="container-fluid">
  <div class="panel-container">
    <div class="panel">
      1 of 4
    </div>
    <div class="panel">
      2 of 4
    </div>
    <div class="panel">
      3 of 4
    </div>

  </div>  
</div>

.panel-container {
    justify-content: flex-end;
    margin-top: 1rem;
    width: 100%;
    display: flex;
    width: fit-content;
}

.panel {
  border: solid 1px #6c757d;
  padding: 10px;
  flex: none;
  width:300px;
}

I've also tried this:

.panel-container {
    margin-top: 1rem;
    justify-content: flex-end;
    width: auto;
    right: inherit;
    display: inline-flex;
}

My jsFiddle

My css only works when I don't set the width of the last panel, but then the width expands to fit the remaining space which is not what I want. Prefer a css solution using flex box, but if that's not possible then anything workable would be appreciated

any help would be appreciated!

Answer 1

oh, of course it was so simple in the end (after a bike ride to clear the mind).

margin-right: auto; on the last child. I applied it to all children in case there was some other content there (for example loading spinners, etc to prevent the right margin collapsing)

.panel-container {
  display: flex;
  justify-content: flex-end;
}

.panel {
  flex: 0 0 300px;
  border: solid 1px #6c757d;
  padding: 10px;
}

    .panel-container > :last-child {
        margin-right: auto;
    }

updated jsfiddle

Answer 2

There's too much in your code. Simplify it.

.panel-container {
  display: flex;
  justify-content: flex-end;
}

.panel {
  flex: 0 0 300px;
  border: solid 1px #6c757d;
  padding: 10px;
}

<div class="container-fluid">
  <div class="panel-container">
    <div class="panel">1 of 4</div>
    <div class="panel">2 of 4</div>
    <div class="panel">3 of 4</div>
  </div>
</div>

revised fiddle

Answer 3

The only way to do it, tha I know of, is to use JavaScript's .scrollLeft:

https://codepen.io/agakesik/pen/WNrEQdP

document.getElementsByClassName('panel-container').scrollLeft = 9999999;