使嵌套子代高度为100％，高度可变的容器不带flexbox

Question

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

我试过使用flexbox，它在原理上可以工作，但是有大约5-6个嵌套列表（其中所有列表都有display：flex;和flex-direction：column;）。我注意到，当Chrome，FF和Safari出现巨大性能问题时，以编程方式添加更多的嵌套列表（可能有太多的重排吗？），所以在这种情况下我不能使用flexbox。 我还无法使用表和表单元使其工作。

这里是一个非常简单的示例： 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上遇到的性能问题（注意渲染需要多长时间-对我来说超过2000ms）

编辑2：粘贴错误的链接

Answer 1

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

• Flexbox的布局并不慢-Google Developers
• 深度嵌套的flexbox布局会导致性能问题吗？ -所以
• 在较旧的布局模型上使用Flexbox-Google开发人员

TL; DR

Flexbox通常比旧的显示属性要快。 正如保罗所说：

旧的flexbox（显示：框）比新的flexbox（显示：框）慢2.3倍

希望能帮助到你 ：）