Question

我有一个如下的HTML结构，问题是，当水平滚动条可见时，垂直滚动条开始呈铬色。但是在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，则垂直滚动条将不会出现。我不知道如何解决此问题。

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>

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

1 个答案: