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

【问题标题】：Overflow elements to left instead of right, but for elements向左溢出元素而不是向右溢出，但对于元素
【发布时间】：2021-01-21 19:12:32
【问题描述】：

当你申请overflow-x: hidden时，

它会一直滚动到LEFT并隐藏溢出到RIGHT的所有内容，

like: （当然它还隐藏了滚动条，我在这里没有这样做。）

我想要相反的行为：

它会一直滚动到RIGHT并隐藏溢出到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

【问题讨论】：

我不明白 :D 你能解释一下你想要达到的目标吗？

标签： html css overflow

【解决方案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 没有被触发，my items are aligned to the right，而是they should be aligned to the left！你知道怎么解决吗？
我已经编辑了代码。将鼠标悬停在元素上以查看它的实际效果。