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不会导致性能问题：

TL; DR

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

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

希望有所帮助：）

使嵌套子项100％高度的可变高度容器没有flexbox

1 个答案:

TL; DR