Как остановить рост контейнера flexbox, если я добавляю относительно позиционированный элемент?

Question

Я планирую относительно позиционирования элемента div внутри другого элемента div в контейнере flexbox, чтобы получить следующий результат .

Фактически и фотография, и элемент относительно позиционирования относительночто я могу использовать их z-index. Родительский элемент div этих элементов - это элемент flexbox, который делит пространство внутри указанного контейнера flexbox с другим элементом div. Оба div имеют flex-basis 50%, чтобы каждый из них в равной степени разделял пространство в родительском div.

Вот пример кода того, как div выглядит БЕЗ относительно размещенного div:

<div id="intro_container" style=" width: 100%; flex: 1 1 35em; margin-top: 3em; height: 100%">

        <div id="intro" style="margin-left: 4%; margin-right: 4%;
        display: flex; flex-direction: row; justify-content: space-around; height: 100%">

        <div id="photo">
            <img src="field.png" style="width: 27em; height: 35em; align-self:  center; position: relative; left: 46%;
transform: translateX(-50%);  z-index: -1; flex-grow: 1">
            <!--<div style="flex-grow: 1;  position: relative; background: transparent; border-style: solid; border-color: #DB9659; border-width: 0.04em; width: 27em; height: 35em; right: 19.05em; top: -1em; align-self: center;  z-index: 1 "> </div>-->
        </div>

        <div id="intro_text">
             <p style="margin-left: 4em; margin-right: 4em; text-align: center; font-family: Hanuman;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 27px;
letter-spacing: 0.05em;

color: #000000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p> 
        </div>
      


        </div> 
       
        </div>

Как видите, оба потомка одинаково разделяют пространство внутри родителя.

Однако, если я добавлю относительно помещенный 'frame 'div:

<div id="intro_container" style=" width: 100%; flex: 1 1 35em; margin-top: 3em; height: 100%">

        <div id="intro" style="margin-left: 4%; margin-right: 4%;
        display: flex; flex-direction: row; justify-content: space-around; height: 100%">

        <div id="photo">
            <img src="field.png" style="width: 27em; height: 35em; align-self:  center; position: relative; left: 46%;
transform: translateX(-50%);  z-index: -1; flex-grow: 1">
            <div style="flex-grow: 1;  position: relative; background: transparent; border-style: solid; border-color: #DB9659; border-width: 0.04em; width: 27em; height: 35em; top: -37em; align-self: center;  z-index: 1 "> </div>
        </div>

        <div id="intro_text">
             <p style="margin-left: 4em; margin-right: 4em; text-align: center; font-family: Hanuman;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 27px;
letter-spacing: 0.05em;

color: #000000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        </p> 
        </div>
   
        </div> 
       
        </div>

Ребенок с фотографией и «рамкой» становится больше.

Как заставить родительский div здесь вообще не расти независимо от того, какие элементы я в него помещаю?