Question

我是CSS网格的新手，无法弄清楚为什么在存在溢出滚动的情况下，容器上的填充不会呈现。

这是我设置的HTML：

<div class="Container">
    <div class="Column"></div>
    <div class="Column"></div>
    <div class="Column"></div>
    <div class="Column"></div>
</div>

CSS（SCSS）是：

$unit: 8px;

.Container {
  display: grid;
  grid-template-columns: repeat(4, $unit * 47); // 8px * 47 = 376px
  grid-column-gap: $unit * 4; // 8px * 4 = 32px
  padding: 2 * $unit;
}

.Column {
  background: green;
  height: 100px;
}

根据视口的宽度会出现溢出，但这是一个理想的结果。我的问题是添加的.Container填充的权利没有呈现。它会渲染到容器的顶部，底部和左侧，但不会渲染到右侧。

这是一个用于说明问题的CodePen：

https://codepen.io/michaellee/pen/BYvowX

Answer 1

是的，它正在渲染。只是很难看到它。

我修改了你的CSS以黄色显示它：

＆＃13;

.Container {
  display: grid;
  grid-template-columns: repeat(4, 376px);
  grid-column-gap: 32px;
  padding: 16px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(tomato)), -webkit-gradient(linear, left top, left bottom, from(yellow));
  background-image: linear-gradient(tomato), linear-gradient(yellow);
  background-clip: content-box, padding-box;
}

.Column {
  -webkit-box-shadow: inset 0px 0px 4px 4px green;
          box-shadow: inset 0px 0px 4px 4px green;
  height: 100px;
}

＆＃13;

<div class="Container">
  <div class="Column"></div>
  <div class="Column"></div>
  <div class="Column"></div>
  <div class="Column"></div>
</div>

＆＃13;

CSS网格容器上的填充不在右侧呈现

1 个答案: