具有绝对定位问题的父级内的CSS Grid

Question

我正在尝试使用auto-fill 来实现尽可能多的列。 这就是代码正常工作的方式。

.grid-container {
  border: solid 1px green;
  padding: 3px;
  min-width: 400px;
  max-width: 900px;
  display: flex;
  flex-basis: 900px;
  flex-direction: column;
  height: 100%;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(294px, 1fr));
  grid-gap: 12px;
}

.item {
  border: solid 1px red;
  min-height: 80px;
}

<div class="drawer">
  <div class="grid-container"> 
   <div class="grid">
     <div class="item">This is grid item</div>
     <div class="item">This is grid item</div>
     <div class="item">This is grid item</div>
     <div class="item">This is grid item</div>
     <div class="item">This is grid item</div>
     <div class="item">This is grid item</div>
     <div class="item">This is grid item</div>
   </div>
  </div>
</div>

但我需要容器drawer 具有绝对定位。如果我将其设置为绝对定位，则网格自动填充将停止工作，并且网格只会创建一列而不尝试容纳更多列。

.grid-container {
  border: solid 1px green;
  padding: 3px;
  min-width: 400px;
  max-width: 900px;
  display: flex;
  flex-basis: 900px;
  flex-direction: column;
  height: 100%;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(294px, 1fr));
  grid-gap: 12px;
}

.item {
  border: solid 1px red;
  min-height: 80px;
}

.drawer {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  height: 100%;
}

<div class="drawer">
  <div class="grid-container"> 
   <div class="grid">
     <div class="item">This is grid item</div>
     <div class="item">This is grid item</div>
     <div class="item">This is grid item</div>
     <div class="item">This is grid item</div>
     <div class="item">This is grid item</div>
     <div class="item">This is grid item</div>
     <div class="item">This is grid item</div>
   </div>
  </div>
</div>

为什么会发生这种情况以及如何使网格正常工作？

Answer 1

.drawer 元素没有明确的宽度设置。

如果您添加 right: 0 或 width: <anything>，它将获得一个宽度，并且网格有一个水平尺寸上下文可供使用。

在上面的示例中，.grid 的宽度由.grid-container 元素的min-width 确定

body {
  /* needed fot this presentation on SE */
  /* unclear of needed IRE */
  position: relative;
}
.drawer {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  max-width: 100%;
}
.grid-container {
  border: solid 1px green;
  padding: 3px;
  min-width: 400px;
  max-width: 900px;
  display: flex;
  flex-basis: 900px;
  flex-direction: column;
  height: 100%;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(294px, 1fr));
  grid-gap: 12px;
}

.item {
  border: solid 1px red;
  min-height: 80px;
}

<div class="drawer">
  <div class="grid-container"> 
   <div class="grid">
     <div class="item">This is grid item</div>
     <div class="item">This is grid item</div>
     <div class="item">This is grid item</div>
     <div class="item">This is grid item</div>
     <div class="item">This is grid item</div>
     <div class="item">This is grid item</div>
     <div class="item">This is grid item</div>
   </div>
  </div>
</div>