html - 位置 :absolute 未触发溢出

Question

在此布局中，我使用带有 position: absolute 的 CSS 网格来显示覆盖在 map 顶部的元素列表。我的问题是 overflow-x: auto 没有被触发，导致只显示前几个元素。

通过将列表的 grid-auto-columns 从 minmax(auto, 1fr) 更改为 minmax(0, 1fr) 我确实得到一个滚动条，但是这些元素然后相互重叠。

代码笔:https://codepen.io/tgel0/pen/ZEbKZvb

.wrapper{
  display: grid;
  grid-template-columns: 0.5fr 0.5fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: 100vh;
  width: 100vw;
  grid-template-areas:
  "side side main main"
  "side side main main"
}

.side {
  grid-area: side;
  display: grid;
  grid-template-columns: 1fr;
  padding: 20px;
  color: #fff;
  background-color: green;
}


.main {
  grid-area: main;
  display: grid;
  background-color: gray;
  grid-template-columns: 1px 1fr 1px;
  gap: 20px;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
}

.main > * {
  grid-column: 1 / -1;
}

.map {
  background-image: url("https://lh3.googleusercontent.com/-bQzIWFMAYus/WXy3WDcphBI/AAAAAAAAAMs/unOi6HiEoi4VWaM0WiP5q32q9zDbIhUvwCLcBGAs/s1600/7-29-2017%2B11-14-59%2BAM.jpg");
  height: 100%;
  overflow: auto;
}

.container-for-items {
  display: grid;
  grid-template-columns: 10px;
  grid-template-rows: 1fr;  
  grid-auto-columns: minmax(0, 1fr); /* minmax(auto, 1fr); */
  grid-auto-flow: column;
  grid-gap: 20px;
  padding: 20px;
  z-index: 99;
  position: absolute;
  bottom: 20px;
  overflow-x: auto;
}

container-for-items:before,
.container-for-items:after {
  content: '';
  width: 10px;
}

.item {
  display: grid; 
  background-color: white;
  border: 2px solid blue;
  padding: 25px;
  width: 300px;
  height: 150px;
}

<div class="wrapper">
  <div class="side">Don't scroll</div>
  <div class="main">
    <div class="map"></div>
    <ul class="container-for-items">
      <li class="item">This is item 1</li>
      <li class="item">This is item 2</li>
      <li class="item">This is item 3</li>
      <li class="item">This is item 4</li>
      <li class="item">This is item 5</li>
      <li class="item">This is item 6</li>
      <li class="item">This is item 7</li>
      <li class="item">This is item 8</li>
      <li class="item">This is item 9</li>
      <li class="item">This is item 10</li>
      <li class="item">This is item 11</li>
    </ul>    
  </div>  
</div>

Answer 1

这个布局上有很多东西——嵌套网格、绝对定位、伪元素、背景图片和很多看似不必要的代码——所以算法可能会相互冲突(例如，我不断在 Chrome/FF 和 Chrome/FF 上得到不同的渲染边缘)。

我认为最简单的解决方案是删除所有不必要的代码，对图像(而不是容器)进行绝对定位，并简化网格结构。

无需对 HTML 进行任何更改。

.wrapper{
  display: grid;
  grid-template-columns: 0.5fr 0.5fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: 100vh;
  /* width: 100vw; */
  grid-template-areas:
  "side side main main"
  "side side main main"
}

.side {
  grid-area: side;
  display: grid;
  /* grid-template-columns: 1fr; */
  padding: 20px;
  color: #fff;
  background-color: green;
}

.main {
  grid-area: main;
  display: grid;
  background-color: gray;
  /* grid-template-columns: 1px 1fr 1px; */
  gap: 20px;
  position: relative;
  /* overflow-y: auto; */
  /* overflow-x: hidden; */
}

/* .main > * {
  grid-column: 1 / -1;
} */

.map {
  background-image: url("https://lh3.googleusercontent.com/-bQzIWFMAYus/WXy3WDcphBI/AAAAAAAAAMs/unOi6HiEoi4VWaM0WiP5q32q9zDbIhUvwCLcBGAs/s1600/7-29-2017%2B11-14-59%2BAM.jpg");
  height: 100vh; /* adjustment */
  width: 100%; /* new */
  position: absolute; /* new */
  /* overflow: auto; */
}

.container-for-items {
  display: grid;
  /* grid-template-columns: 10px; */
  grid-template-rows: 150px; /* adjustment; from grid items */  
  grid-auto-columns: 300px; /*  adjustment; from grid items */
  /* grid-auto-flow: column; */
  grid-gap: 20px;
  padding: 20px;
  z-index: 99;
  /* position: absolute; */
  /* bottom: 20px; */
  align-self: end; /* new */
  overflow-x: auto;
  position: relative; /* for Edge */
}

/* reverse collapsing margin at container end */
/* https://stackoverflow.com/q/38993170/3597276 */
/* .container-for-items:before (unnecessary; remove) */
.container-for-items:after {
  content: '';
  width: 10px;
  grid-row: 1;
}

.item {
  grid-row: 1; /* new */
  display: grid; 
  background-color: white;
  border: 2px solid blue;
  padding: 25px;
  /* width: 300px;  */ /* move to grid-template-columns */
  /* height: 150px; */ /* move to grid-template-rows */
}

/* new */
body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

<div class="wrapper">
  <div class="side">Don't scroll</div>
  <div class="main">
    <div class="map"></div>
    <ul class="container-for-items">
      <li class="item">This is item 1</li>
      <li class="item">This is item 2</li>
      <li class="item">This is item 3</li>
      <li class="item">This is item 4</li>
      <li class="item">This is item 5</li>
      <li class="item">This is item 6</li>
      <li class="item">This is item 7</li>
      <li class="item">This is item 8</li>
      <li class="item">This is item 9</li>
      <li class="item">This is item 10</li>
      <li class="item">This is item 11</li>
    </ul>
  </div>
</div>

revised codepen