Как ограничить динамическую высоту самого высокого потомка в макете flexbox?

Question

У меня есть флексбокс, у которого есть два потомка.Они оба имеют динамическую высоту.Второй блок может быть выше первого, и я хотел бы ограничить высоту второго блока до высоты первого.

.wrapper {
  border: 1px solid black;
  display: flex;

  width: 400px;
  margin-bottom: 100px;
}



.left {
  background-color: blue;
  height: 100px;
  width: 200px;
}

.right {
  width: 200px;
}

.first {
  height: 70px;
  background-color: yellow;
}

.second {
  height: 70px;
  background-color: green;
}


/*desired result */
.fixed-height {
  height: 100px;
}

.overflow-value {
  overflow: auto;
}

<div class="wrapper">
  <div class="left"></div>
  <div class="right">
    <div class="first"></div>
    <div class="second"></div>
  </div>
</div>

<div class="wrapper fixed-height">
  <div class="left"></div>
  <div class="right overflow-value">
    <div class="first"></div>
    <div class="second"></div>
  </div>
</div>

В представленном примере есть две оболочки: первая - это текущая оболочка, где оболочка имеет высоту самого высокого дочернего элемента.И второй - желаемый результат (я добавил высоту к обертке, но я не смог сделать это в реальном приложении)

Пример CodePen

Answer 1

Если вы настаиваете на использовании flexbox, то есть способ заставить контейнер просто учитывать высоту определенного дочернего элемента - это можно сделать, вытеснив содержимое второго элемента из контекста макета с помощью position: absolute.К сожалению, для этого требуется добавить еще одну оболочку внутри элемента .right.Кроме того, расположение элементов абсолютно внутри второго элемента будет означать, что ширина содержимого не будет распространяться на элемент .right, но, поскольку в вашем примере задан явный набор ширины, в этом случае он работает.Код с этими модификациями ниже:

.wrapper {
  border: 1px solid black;
  display: flex;

  width: 400px;
  margin-bottom: 100px;
}



.left {
  background-color: blue;
  height: 100px;
  width: 200px;
}

.right {
  width: 200px;
  position: relative;
  overflow: auto;
}

.first {
  height: 70px;
  background-color: yellow;
}

.second {
  height: 70px;
  background-color: green;
}

.right-wrapper {
  position: absolute;
  width: 100%;
}

<div class="wrapper">
  <div class="left"></div>
  <div class="right">
    <div class="right-wrapper">
    <div class="first"></div>
    <div class="second"></div>
    </div>
  </div>
</div>