根据孩子的大小自动调整父母的身高（弹性元素）

Question

以下（图片）是我要实现的目标：

color1-item元素是动态的，最多可以增加50个元素，但也可以低于5个元素，因此，此时不能以px为单位设置高度。

我正在努力使父母的身高适应孩子的身高。在我的尝试中，color1-item元素溢出到其下面的div-这是不希望的。请参阅下面的代码段以供我尝试：

.color-1-window,
.color-2-window {
  min-height: 25%;
  width: 80%;
  border: 1px solid #d4d4d4;
  position: absolute;
  background: white;
  z-index: 50;
}

.color-window-header {
  display: flex;
  justify-content: space-between;
  height: 65px;
  align-items: center;
}

.color-window-footer {
  position: absolute;
  bottom: 0;
}

.color-window-header-title {
  margin-left: 15px;
  font-size: 18px;
  font-weight: bold;
  font-family: gibsonsemibold;
}

.color-window-header-closer {
  margin-right: 15px;
  font-size: 18px;
  font-weight: bold;
  font-family: gibsonsemibold;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.color-window-footer {
  height: 65px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  border-top: 1px solid #d4d4d4;
}

.btn-apply.standard-btn {
  background-color: #7fc241;
  color: white;
  width: 127px;
  border-radius: 4px;
  font-family: gibsonsemibold;
  font-weight: unset;
  height: 33px;
  margin-right: 15px;
}

.color1-item {
  height: 30px;
  width: 30px;
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  margin: 13px;
}

.color-window-items {
  display: flex;
  flex-flow: row wrap;
}

<div class="color-1-window" style="">
  <div class="color-window-header">
    <div class="color-window-header-title">
      Select Color 1
    </div>
    <div class="color-window-header-closer">x</div>
  </div>
  <div class="color-window-items">
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
  </div>
  <div class="color-window-footer">
    <div class="btn-apply standard-btn">Apply</div>
  </div>
</div>

Answer 1

您在页脚元素上具有绝对位置，这是导致问题的原因，只需将其删除即可。

.color-1-window,
.color-2-window {
  min-height: 25%;
  width: 80%;
  border: 1px solid #d4d4d4;
  position: absolute;
  background: white;
  z-index: 50;
}

.color-window-header {
  display: flex;
  justify-content: space-between;
  height: 65px;
  align-items: center;
}

.color-window-header-title {
  margin-left: 15px;
  font-size: 18px;
  font-weight: bold;
  font-family: gibsonsemibold;
}

.color-window-header-closer {
  margin-right: 15px;
  font-size: 18px;
  font-weight: bold;
  font-family: gibsonsemibold;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.color-window-footer {
  height: 65px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  border-top: 1px solid #d4d4d4;
}

.btn-apply.standard-btn {
  background-color: #7fc241;
  color: white;
  width: 127px;
  border-radius: 4px;
  font-family: gibsonsemibold;
  font-weight: unset;
  height: 33px;
  margin-right: 15px;
}

.color1-item {
  height: 30px;
  width: 30px;
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  margin: 13px;
}

.color-window-items {
  display: flex;
  flex-flow: row wrap;
}

<div class="color-1-window" style="">
  <div class="color-window-header">
    <div class="color-window-header-title">
      Select Color 1
    </div>
    <div class="color-window-header-closer">x</div>
  </div>
  <div class="color-window-items">
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
    <div class="color1-item"></div>
  </div>
  <div class="color-window-footer">
    <div class="btn-apply standard-btn">Apply</div>
  </div>
</div>