html - 如果父级在 Chrome 中有 flex-direction 列，则网格行不会拉伸(stretch)到整个元素高度

Question

我正在尝试显示两列，并将 CSS 网格拉伸(stretch)到屏幕底部。我使用 flexbox 来实现它:

html, body {
  height: 100%;
}

#root {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  color: #fff;
}

#wrapper {
  flex: 1;
  display: grid;
  grid:
    "title title" min-content
    "divider divider" min-content
    "part1 part2" 1fr
    / calc(50% - 5px) calc(50% - 5px);
  background-color: #003300;
  grid-gap: 10px;
}

#title {
  grid-area: title;
}

#divider {
  grid-area: divider;
}

#part1 {
  grid-area: part1;
}

#part2 {
  grid-area: part2;
}

#part1, #part2 {
  background-color: #ff0000;
}

<section id="root">
  <section id="wrapper">
    <div id="title">Title</div>
    <div id="divider"><hr></div>
    <div id="part1">Part 1</div>
    <div id="part2">Part 2</div>
  </section>
</section>

如果您在 Firefox 中运行此代码，您可以看到延伸到屏幕底部的红色列。但在 Chrome 中，它们不能正确拉伸(stretch)并尽可能小。有什么办法可以避免这个问题吗？我想保存 flexbox-direction: column。

也许还有一个指向 chromium bug 的链接？

Answer 1

看起来像是 Chrome 中的错误。

Flex 和 Grid 属性在这种特定情况下表现不佳。

我知道你说过你想保留 flex-direction: column。

但是你可以获得same behavior使用 flex-direction: row 当您将 wrap 添加到容器并使每个元素 width: 100% 时。

在这种情况下，flex-direction 中的开关可以解决您的问题。

#root {
  display: flex;
  min-height: 100vh;
  color: #fff;
}

#wrapper {
  flex: 1;
  display: grid;
  grid:
    "title title" min-content
    "divider divider" min-content
    "part1 part2" 1fr
    / 1fr 1fr ; /* calc(50% - 5px) calc(50% - 5px) why the added complexity? */
  background-color: #003300;
  grid-gap: 10px;
}

#title   { grid-area: title; }
#divider { grid-area: divider; }
#part1   { grid-area: part1; }
#part2   { grid-area: part2; }
#part1,
#part2   { background-color: #ff0000; }
body     { margin: 0; }

<section id="root">
  <section id="wrapper">
    <div id="title">Title</div>
    <div id="divider"><hr></div>
    <div id="part1">Part 1</div>
    <div id="part2">Part 2</div>
  </section>
</section>

jsFiddle demo

更多信息:Force flex item to span full row width

---

如果您真的无法从 flex-direction: column 切换，您可以尝试以下两个选项:

• 将 min-height 从 #root 移动到 #wrapper ( jsfiddle demo )

• 将整个父级(body，在本例中)设为 flex 容器 (jsfiddle demo)