使用css网格时，水平滚动条会导致垂直滚动条的出现

Question

我有一个HTML结构如下，问题是当水平滚动条是可见的，垂直滚动条开始进入铬。但是在firefox中，它工作得很好，这是因为div高度不是自动缩放的，因为使用了网格1fr。如果我使用height: 100%，它就能正常工作。

下面是代码笔

​

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>

​