html - CSS3 FLEXBOX 无法正常工作的 Chrome(FF - OK)

Question

某些结构在 FF 中运行良好，但 Chrome 却不行。

堆栈片段

html, body {
    height: 100%!important; width: 100%!important;
    margin: 0!important; padding: 0!important;
}

.x {display: flex; flex-direction: column; height: 100%; width: 100%;}
    .x-header {background-color: silver;}
    .x-body {flex: 1 1 auto; overflow-y: auto;}

/* CONTENT WITH 2 COLUMNS */
.x-structure-2-columns {display: flex; flex-direction: row; height: 100%; width: 100%;}
    .x-structure-2-columns-left {background-color: lightgreen; width: 100px;}
    .x-structure-2-columns-right {display: flex; flex: 1 1 auto; overflow-y: auto; flex-direction: column;}
        .x-structure-2-columns-right-header {background: yellow;}
        .x-structure-2-columns-right-body {flex: 1 1 auto; overflow-y: auto; min-height: 0px; background: pink;}

<div class="x">
    <div class="x-header">This is a header</div>
    <div class="x-body">
        <div class="x-structure-2-columns">
            <div class="x-structure-2-columns-left">
                LEFT
            </div>
            <div class="x-structure-2-columns-right">
                <div class="x-structure-2-columns-right-header">SUB NAVIGATION</div>
                <div class="x-structure-2-columns-right-body"><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p><p>123<br>345<br>678</p></div>
            </div>
        </div>
    </div>
</div>

2 列必须固定，但它们不在 Chrome 中。

这里还有一个 fiddle :https://jsfiddle.net/q28v4z05/

谢谢!

Answer 1

此处您使用了 height: 100%，并结合了部分嵌套的 Flexbox。

不推荐这样做，例如 flex 元素通常使用 flex-grow 或 align-items 来填充其父项的给定高度/宽度，并且没有高度设置。因此，当 flex 元素的子项使用百分比时，它在大多数情况下会解析为 auto 并导致它无法正常工作。

而是一直使用 Flexbox。

此处的主要修复是在 x 上将 min-height 的默认 auto 重置为 0，允许它小于它的内容，结合添加 display: flex，使它成为一个 flex 容器。

这样我们就可以删除 .x-structure-2-columns 上的 height: 100% 并让 Flexbox 负责空间分配。

请注意，可以使用 overflow(使用 visible 以外的值)代替 min-height: 0，正如您在某些地方使用 overflow-y: auto; 所做的那样，尽管 min-height 在可读性方面更合适，除非需要例如一个滚动条，就像在 x-structure-2-columns-right-body 上一样。

我还清理了一些不需要或具有默认值的属性。

以下示例已在最新版本的 Chrome、Firefox、Edge 和 IE11 上成功测试。

Updated fiddle

堆栈片段

html, body {
  height: 100%;
  margin: 0;
}

.x {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.x-header {
  background-color: silver;
}

.x-body {
  flex: 1;
  min-height: 0;                          /*  added  */
  display: flex;                          /*  added  */
}


/* CONTENT WITH 2 COLUMNS */
.x-structure-2-columns {
  flex: 1;                                /*  fill width  */
  display: flex;
}

.x-structure-2-columns-left {
  background-color: lightgreen;
  width: 100px;
}

.x-structure-2-columns-right {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.x-structure-2-columns-right-header {
  background: yellow;
}

.x-structure-2-columns-right-body {
  flex: 1 1 auto;
  overflow-y: auto;
  background: pink;
}

<div class="x">
  <div class="x-header">This is a header</div>
  <div class="x-body">
    <div class="x-structure-2-columns">
      <div class="x-structure-2-columns-left">
        LEFT
      </div>
      <div class="x-structure-2-columns-right">
        <div class="x-structure-2-columns-right-header">SUB NAVIGATION</div>
        <div class="x-structure-2-columns-right-body">
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
          <p>123
            <br>345
            <br>678</p>
        </div>
      </div>
    </div>
  </div>
</div>