Flexbox- stop flexbox item grow

Question

В принципе, я хочу остановить нижний элемент, растущий на высоте. Я хочу, чтобы нижний элемент правой Flexbox быть только высота его содержание (как это было бы с дисплеем: встроенный блок;)

Элементы сетки и сетки имеют ..

display: flex; 
align-items: stretch; 
flex-wrap: wrap 

Пожалуйста, смотрите приложенный образ.

Спасибо

Answer 1

Вы должны создать другой контейнер вокруг вашего нижнего элемента.

<div class="container"> /* This container will be grown by Flex*/ 
    <div class="grey-box"> /* This container will remain the same height as its children */ 
     /* content */ 
    </div> 
</div> 

И вы должны применять следующие свойства к вашим .container DIV:

.container { 
    justify-content: center; 
    align-items: center; 
    align-content: center; 
} 

С соответствующими предварительными исправлениями Ofcourse.