使用css Grid时水平滚动条导致垂直滚动条出现答案

【问题标题】：Horizontal scroll bar causes vertical scroll bar to come when using css Grid使用css Grid时水平滚动条导致垂直滚动条出现
【发布时间】：2019-09-13 11:09:24
【问题描述】：

我有一个如下所示的 HTML 结构，问题是当水平滚动条可见时，垂直滚动条开始出现在 chrome 中。但在 Firefox 中它工作正常，这是因为 div 高度不是自动缩放的，因为使用网格 1fr。如果我使用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，垂直滚动条就不会出现。我不知道如何解决这个问题。

【问题讨论】：

我能看到的第一个问题是，你把所有的.containers overflow-y: scroll; 都给了。基本上，每次都会显示垂直滚动（至少在您的代码笔中）。
120x5 > 500。将框元素的宽度更改为 100 像素或 20%。那么水平滚动条是由于垂直滚动条（overflow-y）
如果你把height: 100%;和overflow: auto结合起来，它可以正常工作。
这是一个 X-Y 问题...您不需要 mainContainer 成为 网格容器，将其删除...

标签： html css css-grid

【解决方案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>

【讨论】：