Question

更新：我在Chrome 72上看到了这种奇怪的行为。FireFox64可以！！

我在嵌套的flexbox上遇到问题。

在下面的代码段中，我向.root.container添加了一个虚拟的XL高度，因此当有许多个项目溢出可用的最大高度时，结果正是我想要的。< / p>

相反，当个项目很少时，.root.container不应扩展到所有可用高度。

换句话说，我希望.root.container的高度为auto，但我不知道怎么做。
删除其虚拟高度，溢出将在.root.content而非.sub.content上触发。

请帮助我了解flexbox在这种特殊情况下如何工作。

P.S。小提琴也可用here

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

div {
  padding: 10px;
}

.container {
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  max-height: 100%;
  overflow: auto;
}

.root.container {
  background-color: red;
  max-height: 100%;
  height: 999999px; /* i want height to be 'auto' */
}

.sub.container {
  background-color: purple;
  height: 100%;
}

.root.header {
  background-color: lightblue;
}

.sub.header {
  background-color: lightgreen;
}

.root.content {
  background-color: yellow;
}

.sub.content {
  background-color: orange;
}

<div class="root container">
  <div class="root header">header</div>
  <div class="root content">
    <div class="sub container">
      <div class="sub header">menu</div>
      <div class="sub content">
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Answer 1

设置max-height:100% in the child element need a reference时，您的代码可以按预期工作，因为max-height {{3}}，如果您删除高度，max-height将无法自动执行。另外，即使您删除max-height，Firefox也将具有相同的输出，因此问题与html, body { height: 100%; margin: 0; padding: 0; } * { box-sizing: border-box; } div { padding: 10px; } .container { display: flex; flex-direction: column; } .content { flex: 1; max-height: 100%; overflow: auto; } .root.container { background-color: red; max-height: 100%; } .sub.container { background-color: purple; width:100%; /*added this*/ } .root.header { background-color: lightblue; } .sub.header { background-color: lightgreen; } .root.content { background-color: yellow; display:flex; /*added this*/ } .sub.content { background-color: orange; }无关。 ¹

相反，您可以保留级联的flex容器，并依靠默认的拉伸对齐方式获得所需的内容：

<div class="root container">
  <div class="root header">header</div>
  <div class="root content">
    <div class="sub container">
      <div class="sub header">menu</div>
      <div class="sub content">
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
        </ul>
      </div>
    </div>
  </div>
</div>

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

div {
  padding: 10px;
}

.container {
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  overflow: auto;
}

.root.container {
  background-color: red;
  max-height: 100%;
}

.sub.container {
  background-color: purple;
  height: 100%;
}


.root.header {
  background-color: lightblue;
}

.sub.header {
  background-color: lightgreen;
}

.root.content {
  background-color: yellow;
}

.sub.content {
  background-color: orange;
}

为更好地了解此问题，我们删除一些属性，仅保留将触发不同行为的所需属性：

<div class="root container">
  <div class="root header">header</div>
  <div class="root content">
    <div class="sub container">
      <div class="sub header">menu</div>
      <div class="sub content">
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
        </ul>
      </div>
    </div>
  </div>
</div>

height:100%

所有问题都与.sub.container上使用的内部auto有关。从技术上来讲，考虑到规范，此高度应该不能为/api，因为未设置父高度，但Firefox似乎能够估算该高度。可能是由于嵌套的flex容器，我们可以在知道内容或只是一个错误之前就评估父级高度。

Chrome并没有这样做，只是忽略了逻辑上的高度。

Answer 2

也许您正在寻找height: fit-content？我对您想要的结果感到困惑。

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

div {
  padding: 10px;
}

.container {
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  max-height: 100%;
  overflow: auto;
}

.root.container {
  background-color: red;
  max-height: 100%;
  height: fit-content;
}

.sub.container {
  background-color: purple;
  height: 100%;
}

.root.header {
  background-color: lightblue;
}

.sub.header {
  background-color: lightgreen;
}

.root.content {
  background-color: yellow;
}

.sub.content {
  background-color: orange;
}

<div class="root container">
  <div class="root header">header</div>
  <div class="root content">
    <div class="sub container">
      <div class="sub header">menu</div>
      <div class="sub content">
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
        </ul>
      </div>
    </div>
  </div>
</div>

嵌套的flexbox高度与最大高度

2 个答案: