弹性列在绝对位置换行

Question

我似乎无法理解这一点。我正在研究（现有的）菜单结构。当前的菜单从来没有考虑过我们拥有的子项目的数量，因此它会从视口溢出。由于其具有粘性，某些项目无法访问，这是有问题的。由于 Flexbox 存在一个问题，即 Flexbox 本身在换行时不会调整其宽度，因此子菜单的背景不会继续。再次出现问题，因为浮动文本在其他文本之上很烦人。读完之后，看来主要使用的是写入模式解决方案。然而，当我尝试应用它时，它仍然会得到一个单行，因为标题元素必须附加有position:fixed。

举例说明：

html:

<header>
  <div class="wrapper">
    <ul class="parent">
      <li class="child">Menu item 1</li>
      <li class="child">Menu item 2</li>
      <li class="child">Menu item 3
        <ul class="sub-parent">
          <li class="sub-child">Sub item 1</li>
          <li class="sub-child">Sub item 2</li>
          <li class="sub-child">Sub item 3</li>
          <li class="sub-child">Sub item 4</li>
          <li class="sub-child">Sub item 5</li>
          <li class="sub-child">Sub item 6</li>
          <li class="sub-child">Sub item 7</li>
          <li class="sub-child">Sub item 8</li>
          <li class="sub-child">Sub item 9</li>
          <li class="sub-child">Sub item 10</li>
          <li class="sub-child">Sub item 12</li>
          <li class="sub-child">Sub item 13</li>
          <li class="sub-child">Sub item 14</li>
          <li class="sub-child">Sub item 15</li>
          <li class="sub-child">Sub item 16</li>
          <li class="sub-child">Sub item 17</li>
          <li class="sub-child">Sub item 18</li>
          <li class="sub-child">Sub item 19</li>
        </ul>

      </li>
      <li class="child">Menu item 4</li>
      <li class="child">Menu item 5</li>
      <li class="child">Menu item 6</li>
    </ul>
  </div>
</header>
<div class="content">
Sub-items should wrap till end of viewport
</div>

CSS：

header{
 position: fixed;
 top: 0;

}

.wrapper{
  background: #8AB9B5;

}

.parent{
  display: flex;
  background: #C8C2AE;
  list-style: none;
  width: 100vw;
}

.child{
  margin: 0.5em;
}

.sub-parent{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-height: 80vh;
  background: #D0CDD7;
  position: absolute;
  margin: 0;
  list-style: none;
  padding: 0;
  writing-mode: vertical-lr;
}

.sub-child{
  background: #ACB0BD;
  display: block;
  margin: 0.5em;
  writing-mode: horizontal-tb;
}

.content{
  margin-top:100px;
}

https://jsfiddle.net/Tristanschaaf/7pd504hj/99/

当前结果：

预期/想要的结果：

子项也可能具有子项结构。

我似乎找不到一种方法让弹性盒看到它可以垂直扩展。此外，Firefox 中存在一个问题，即高度似乎最初设置为 0，直到触发视口调整大小。

我非常清楚这种结构可能会导致它自己的用户体验问题，但我不在这里讨论这些问题，像往常一样，它的影响也会影响业务的其他方面，我现在无法改变它。

Answer 1

您只需writing-mode: vertical-lr;从元素中删除属性.sub-parent ，只需为该元素提供固定宽度即可width:200px;。