Автоматическая настройка высоты родителей (гибкий элемент) в соответствии с размерами детей

Question

Ниже (изображение) я пытаюсь достичь:

Color1элементы -item являются динамическими и могут доходить до 50, но также могут содержать до 5 элементов, поэтому на данный момент установка высоты в пикселях не возможна.

Я пытаюсь сделать так, чтобыРост родителей будет соответствовать размеру детей.В моей попытке элементы 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>