Как сделать родительский контейнер и другой дочерний элемент во Flex, чтобы он стал одним из самых длинных

Question

Мне нужно, чтобы контейнер и зеленый div росли по размеру с синим всякий раз, когда вещи внутри голубого div увеличивались.

.container {
  background: grey;
  height: 200px;
  flex-direction: column;
  padding: 10px;
  display: flex;
}

.normal {
  background: green;
}

.wide {
  width: 2500px;
  background: blue;
  flex: 1 0 auto;
}

<div class="container">
  <div class="normal">Normal</div>
  <div class="wide">Wide</div>
</div>

CodePen

Answer 1

рассмотрим inline-flex вместо

.container {
  background: grey;
  height: 200px;
  flex-direction: column;
  padding: 10px;
  display: inline-flex;
  min-width:100%; /*to make sure it behave like flex if the content is small*/
  box-sizing:border-box;
}

.normal {
  background: green;
}

.wide {
  width: 2500px;
  background: blue;
  flex: 1 0 auto;
}

<div class="container">
  <div class="normal">Normal</div>
  <div class="wide">Wide</div>
</div>

Похожие: Почему внешний

здесь не полностью окружает внутренний

?