时间戳

首页 > 解决方案 > Flow:Column Flexbox 在 display:grid Container 内部中断

css - Flow:Column Flexbox 在 display:grid Container 内部中断

问题描述

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

这是一个准系统演示，但在我更大的应用程序中存在相同的行为。为什么 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>

标签： cssflexboxcss-grid

解决方案

无需指定height:100%网格项，因为它会产生意想不到的结果。然后你应该隐藏溢出或启用滚动。

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>

推荐阅读