溢出元素向左而不是向右，但对于元素

Question

申请时overflow-x: hidden,

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

喜欢：（当然它也隐藏了滚动条，我在这里没有这样做。）

我想要相反的行为：

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

所以它看起来像：（滚动条当然不应该是可见的）

此外，当 overflow 未被触发时，自然“流程”不应受到影响。这些项目仍然应该像这样从左边开始：

这里是参考代码：

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>

请注意，我们正在处理 <ol> 个元素，而不是文本，因此 direction: rtl 将不起作用。因此，为什么这个问题不同于：Overflow to left instead of right

Answer 1

这是一种使用包装器并将导航定位在右侧的可能性：

已编辑：添加了最小宽度

#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>

溢出元素向左而不是向右，但对于元素

Overflow elements to left instead of right, but for elements

html

css

overflow