使嵌套的子级不具有 flexbox 的可变高度容器的 100% 高度

Question

我在可变高度容器中有一堆嵌套列表，我希望所有嵌套列表/子列表占据容器的 100% 高度。

我尝试过使用 flexbox，它原则上可以工作，但有大约 5-6 个嵌套列表（其中都有 display: flex; 和 flex-direction: column;）我注意到 Chrome、FF 中存在巨大的性能问题和 Safari 以编程方式添加更多嵌套列表时（可能有太多的重排？）所以在这种情况下我不能使用 flexbox。我也无法使用 table 和 table-cell 让它工作。

这里有一个非常简单的例子：https://jsfiddle.net/bf0f6zj5/

标记：

<ul>
  <li>
    <div>
      text 1
    </div>
    <ul>
      <li>
        <div>
          some very long text here
        </div>
        <ul>
          <li>
            <div>
              text 3
            </div>
            <ul>
              <li>text</li>
              <li>text</li>
              <li>text</li>
              <li>text</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

CSS：

ul, li {
  margin:0;
  padding:0;
  list-style-type: none;
  overflow:hidden;
}

li {
  border-left: 1px solid grey;
  padding-left: 8px;
}

li > div {
  padding-right: 4px;
  float:left;
  writing-mode: vertical-rl;
}

目标是使嵌套列表的左边框与最大的列表具有相同的高度，而不使用 flexbox。

编辑：创建了一个新的小提琴 https://jsfiddle.net/vgjkzhqq/3/ 来显示我在使用 flexbox 时遇到的性能问题（注意渲染需要多长时间 - 对我来说超过 2000 毫秒）

编辑2：粘贴错误的链接

Answer 1

根据许多不同的来源，包括 Google Web 开发人员，Flexbox 不会导致性能问题：

• Flexbox layout isn't slow - Google Developpers
• Does deep nesting flexbox layout cause performance issue? - SO
• Use flexbox over older layout models - Google Developpers

TL;DR

Flexbox 通常比旧的显示属性更快。正如Paul 所说：

旧的 flexbox (display: box) 比新的 flexbox (display: flex) 慢 2.3 倍

希望对你有帮助:)