Overflow elements to left instead of right, but for elements

Question

When you apply overflow-x: hidden,

it'll scroll you all the way to the LEFT and hide everything that overflows to the RIGHT,

like: (and of course it also hides the scrollbar, which I didn't do here.)

I want the opposite behavior:

it'll scroll you all the way to the RIGHT and hide everything that overflows to the LEFT,

so it'll look like: (again the scrollbar shouldn't be visible of course)

Also, when the overflow isn't triggered the natural "flow" shouldn't be affected. The items should still start from the left like so:

Here is the reference code:

nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;

    justify-content: flex-start !important;

    overflow-x: shown;

    ol {
        flex: 1;
    }
}

<!DOCTYPE html>
<html>
  <head>
  <body>
    <nav>
<ol>
  <li class="dir marked">
    <a href="../../..">
      LinearAlgebra
    </a>
  </li>
</ol>
<ol>
  <li class="dir marked">
    <a href="../..">
      other
    </a>
  </li>
</ol>
<ol>
  <li class="dir marked">
    <a href="..">
      nested
    </a>
  </li>
  <li class="file">
    <a href="../../test.html">
      test
    </a>
  </li>
</ol>
<ol>
  <li class="dir marked">
    <a href="">
      x2Nested
    </a>
  </li>
  <li class="file">
    <a href="../nested.html">
      nested
    </a>
  </li>
</ol>
<ol>
  <li class="file">
    <a href="anotherFile.html">
      anotherFile
    </a>
  </li>
  <li class="file">
    <a href="x2Nested.html">
      x2Nested
    </a>
  </li>
</ol>
    </nav>
  </body>
</html>

Note we are dealing with <ol> elements, not text, so direction: rtl won't work. Hence why this question is different from: Overflow to left instead of right

I don't get it :D can you explain a little more what you trying to achieve? — Yalcin Kilic, Jan 21 '21 at 09:54

vals · Accepted Answer · 2021-01-21T11:12:32.467

Here is one possibility using a wrapper, and positioning the nav to the right:

Edited: added min-width

#container {
    width: 400px;
    overflow: hidden;
    position: relative;
    border: solid 1px green;
    height: 100px;
}

#container:hover {
    width: 800px;
}

nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;

    justify-content: flex-start !important;

  right: 0px;
  position: absolute;
  width: fit-content;
  border: solid 1px red;
  min-width: 100%;
}

<div id="container">
<nav>
<ol>
  <li class="dir marked">
    <a href="../../..">
      LinearAlgebra
    </a>
  </li>
</ol>
<ol>
  <li class="dir marked">
    <a href="../..">
      other
    </a>
  </li>
</ol>
<ol>
  <li class="dir marked">
    <a href="..">
      nested
    </a>
  </li>
  <li class="file">
    <a href="../../test.html">
      test
    </a>
  </li>
</ol>
<ol>
  <li class="dir marked">
    <a href="">
      x2Nested
    </a>
  </li>
  <li class="file">
    <a href="../nested.html">
      nested
    </a>
  </li>
</ol>
<ol>
  <li class="file">
    <a href="anotherFile.html">
      anotherFile
    </a>
  </li>
  <li class="file">
    <a href="x2Nested.html">
      x2Nested
    </a>
  </li>
</ol>
    </nav>
    </div>

This is good, however it creates a new problem. Now whenever `overflow` isn't triggered, [my items are aligned to the right](https://i.gyazo.com/d8c6534d0815c38e84f6c0567edd6d0c.png), but [they should be aligned to the left](https://i.gyazo.com/4321330ced0befc872d85fed9ae6abeb.png)! Do you know how to solve that? — Sebastian Nielsen, Jan 21 '21 at 10:51
I have edited the code. Hover the element to see it in action. — vals, Jan 21 '21 at 11:13

Overflow elements to left instead of right, but for elements

1 Answers1