html - 使用css Grid时水平滚动条导致垂直滚动条来

Question

我有一个如下所示的 HTML 结构，问题是当水平滚动条可见时，垂直滚动条开始出现在 chrome 中。但在 Firefox 中它工作正常，这是因为使用网格 1fr 后 div 高度不会自动缩放。如果我使用 height: 100%，它工作正常。

然后是code pen

html, body {
  height: calc(100% - 20px);
  display: grid;
  grid-template-row: 1fr 1fr;
}

.mainContainer{
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;  
}

.container{
  display: grid;
  grid-template-rows: 1fr;
  grid-auto-flow: column;
  width: 500px;
  overflow-x: auto;
  overflow-y: scroll;
}

.box{
  width: 120px;
}

<div class="mainContainer">
   <h3>Without horizontal scroll - no vertical scroll bar</h3>
   <div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
  </div>
</div>

<div class="mainContainer">
   <h3>With horizontal scroll- vertical scroll is comming</h3>
   <div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
  </div>
</div>

如果去掉 div-4、div-5，垂直滚动条就不会出现。我不知道如何解决这个问题。

Answer 1

将所有内容网格化有点尴尬。以前从未见过。

原因是:横向占用了一点纵向空间。然后从可用的垂直空间中减去。但不幸的是，网格行不适应这一点。

我没有权威的答案，无论这是预期的行为还是 W3C 没有定义，浏览器供应商都在做他们自己的事情。

但这里有一个解决方法(适用于您的情况，但可能不适用于所有人):我包装了容器的盒子并分解了职责。我还使用了 position: relative 和 absolute。

html {
  height: calc(100% - 20px);
}

body {
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 1fr;
}

.mainContainer {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
}

.container {
  display: grid;
  grid-template-rows: 1fr;
  grid-auto-flow: column;
  width: 500px;
  overflow-x: auto;
  overflow-y: auto;
}

.container-wrap {
  display: grid;
  width: 500px;
  overflow-x: auto;
  overflow-y: auto;
  position: relative;
}
.wrap {
  display: grid;
  grid-template-rows: 1fr;
  grid-auto-flow: column;
  position: absolute;
}

.box {
  width: 120px;
}

<div class="mainContainer">
  <h3>Without horizontal scroll - no vertical scroll bar</h3>
  <div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
  </div>
</div>

<div class="mainContainer">
  <h3>With horizontal scroll- vertical scroll is comming</h3>
  <div class="container-wrap">
    <div class="wrap">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
    </div>
  </div>
</div>