Flow:Column Flexbox 在 display:grid Container 内部中断答案

【问题标题】：Flow:Column Flexbox breaks inside display:grid ContainerFlow:Column Flexbox 在 display:grid Container 内部中断
【发布时间】：2018-12-26 17:48:32
【问题描述】：

我想在更大的 CSS 网格布局中集成像 https://jsfiddle.net/przemcio/xLhLuzf9/3/ 这样的布局。但是，一旦容器具有属性display: grid，一切都会中断。 “中断”是指 .content div 所需的 flexbox 收缩属性不适用，它不会收缩并允许页脚的内容显示在滚动折叠上方。

这是一个准系统演示，但在我更大的应用程序中存在相同的行为。为什么 CSS Grid 会破坏这种布局，即使在子单元格内部也是如此，我该如何解决？

演示：

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

.grid {
  /* this line breaks it: */
  display: grid;
  height: 100vh;
}

.cell {
  height: 100%;
  display: block;
  grid-column-end: span 1;
  grid-row-end: span 1;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.content {
  flex: 1 1 auto;
  overflow-y: auto;
  border-bottom: 1px solid gray;
}

.footer {
  flex: 0 1 auto;
}

<!DOCTYPE html>
<html>

<body>
  <div class="grid">
    <div class="cell">
      <div class="box">
        <div class="content">
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
        </div>
        <div class="footer">
          <p><b>footer</b>
            <br>
            <br>(sized to content)</p>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

【问题讨论】：

标签： css flexbox css-grid

【解决方案1】：

无需为网格项目指定height:100%，因为它将创建an unexpected result。然后你应该隐藏溢出或启用滚动。

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

.grid {
  /* this line breaks it: */
  display: grid;
  height: 100vh;
}

.cell {
  /*height: 100%;*/
  overflow:auto;
  /*display: block; not needed*/
  grid-column-end: span 1;
  grid-row-end: span 1;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.content {
  flex: 1 1 auto;
  overflow-y: auto;
  border-bottom: 1px solid gray;
}

.footer {
  flex: 0 1 auto;
}

<!DOCTYPE html>
<html>

<body>
  <div class="grid">
    <div class="cell">
      <div class="box">
        <div class="content">
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
        </div>
        <div class="footer">
          <p><b>footer</b>
            <br>
            <br>(sized to content)</p>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

您还可以在行模板中保留height:100% 并指定100vh。在这种情况下，百分比高度将按预期运行：

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

.grid {
  /* this line breaks it: */
  display: grid;
  grid-template-rows:100vh;
}

.cell {
  height: 100%;
  /*display: block; not needed*/
  grid-column-end: span 1;
  grid-row-end: span 1;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.content {
  flex: 1 1 auto;
  overflow-y: auto;
  border-bottom: 1px solid gray;
}

.footer {
  flex: 0 1 auto;
}

<!DOCTYPE html>
<html>

<body>
  <div class="grid">
    <div class="cell">
      <div class="box">
        <div class="content">
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
          <p>
            <b>content</b> (fills remaining space)
          </p>
        </div>
        <div class="footer">
          <p><b>footer</b>
            <br>
            <br>(sized to content)</p>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

【讨论】：

非常感谢！对于任何感兴趣的人，我的修复与我对github.com/azz/styled-css-grid 的使用有关。我没有在 Grid 元素中明确指定 rows 属性（我使用了一些不必要的奇怪设置），而是让它使用默认值，这神奇地修复了所有问题。
后续注意：如果您有超过 1 行，特别是对于这一行，将其轨道高度设置为 minmax(0px, auto) 会以某种方式解决问题（而只是 auto 不会）。