CODEWITHSUNDEEP
htmlcssoverflow
Sebastian Nielsen
Sebastian Nielsen

Reputation: 4229

Overflow elements to left instead of right, but for elements

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.) enter image description 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)

enter image description here

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

enter image description here

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

Upvotes: 0

Views: 194

Answers (1)

vals
vals

Reputation: 64264

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>

Upvotes: 1

Related Questions