CSS дочерний div расширяется своим содержимым, даже если его родитель имеет фиксированную высоту

Question

Допустим, у меня есть родительский элемент <div> с фиксированной высотой и дочерними элементами flex-элемента.

Есть ли способ, чтобы его дочерние элементы высоты не фиксировались, но расширялись в зависимости от их содержимого ?

.main-container {
  height: 250px;
  background-color: green;
  display: flex;
  flex: 0 1 auto;
  overflow: auto;
}
.div1 {
  width: 100%;
  height: 100%;
  background-color: lightcoral;
}
.div2 {
  width: 100%;
  background-color: lightgrey;
}
.div3 {
  width: 100%;
  background-color: lightpink;
}
div p {
  font-size: 10em;
}

<div class="main-container">
  <div class="div1">
    <p>a</p>
  </div>
  <div class="div2">q</div>
  <div class="div3">s</div>
</div>

Требуемый результат:

Answer 1

Вам не нужно использовать fit-content (что не поддерживается в Firefox: https://caniuse.com/#feat = mdn-css_properties_height_fit-content ), вам просто нужно отключить эффект стерилизации, добавив align-self:flex-start; к нужному элементу

.main-container {
  height: 250px;
  background-color: green;
  display: flex;
  flex: 0 1 auto;
  overflow: auto;
}
.div1 {
  width: 100%;
  align-self:flex-start;
  background-color: lightcoral;
}
.div2 {
  width: 100%;
  background-color: lightgrey;
}
.div3 {
  width: 100%;
  background-color: lightpink;
}
div p {
  font-size: 10em;
}

<div class="main-container">
  <div class="div1">
    <p>a</p>
  </div>
  <div class="div2">q</div>
  <div class="div3">s</div>
</div>

Answer 2

Есть ли способ, чтобы высота его дочерних элементов не фиксировалась, а увеличивалась в зависимости от их содержимого?

Если вы хотите, чтобы div был настолько высоким, насколько это необходимо для контента, вы можете применить height: fit-content; в этом разделе.

Пример в фрагменте ниже (для левого столбца):

.main-container {
  height: 250px;
  background-color: green;
  display: flex;
  flex: 0 1 auto;
  overflow: auto;
}
.div1 {
  width: 100%;
  height: fit-content;
  background-color: lightcoral;
}
.div2 {
  width: 100%;
  background-color: lightgrey;
}
.div3 {
  width: 100%;
  background-color: lightpink;
}
div p {
  font-size: 10em;
}

<div class="main-container">
  <div class="div1">
    <p>a</p>
  </div>
  <div class="div2">q</div>
  <div class="div3">s</div>
</div>