Детский элемент переполняет родителя

Question

У меня есть тело, состоящее из 2 навигационных баров (сверху), верхнего графического (среднего) flexbox и содержимого flexbox (внизу).

В верхней графической flexbox я хочу вставить черный ящик, в который я могу поместить текст. Когда я делаю этот ящик, он не переполняет верхнюю часть родительского поля, однако он переполняет нижнюю и правую части родителя, продолжая в поле содержимого, когда я изменяю размер страницы. Я хочу, чтобы мой ящик оставался внутри границ его родительского элемента и учитывал моего родителя, когда я устанавливал свою ширину/высоту, чтобы он не перекрывал содержимое flexbox при изменении размера веб-сайта.

.nav { 
 
    display: flex; 
 
    flex: 1; 
 
    background-color: white; 
 
    flex-direction: column; 
 
} 
 
.topnav { 
 
    flex: 1; 
 
    background-color: white; 
 
    border-bottom: ridge 1px; 
 
} 
 
.bottomnav { 
 
    flex: 1; 
 
    background-color: white; 
 
} 
 
.topgraphic { 
 
    overflow: hidden; 
 
    position: relative; 
 
    flex: 2; 
 
    background-color: lightblue; 
 
    z-index: -2; 
 
} 
 
.topgraphic img { 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    -moz-box-shadow: inset 0px 12px 15px -12px #696868; 
 
    -webkit-box-shadow: inset 0px 12px 15px -12px #696868; 
 
    box-shadow: inset 0px 12px 15px -12px #696868; 
 
    z-index: -1; 
 
} 
 
.topgraphic .textbox { 
 
    box-sizing: inherit; 
 
    position: absolute; 
 
    margin-right: 5%; 
 
    margin-bottom: 10%; 
 
    width: 30%; 
 
    height: 80%; 
 
    background-color: rgba(0, 0, 0, 0.6); 
 
} 
 
.content { 
 
    z-index: -5; 
 
    flex: 7; 
 
    background-color: white; 
 
    min-height: 25%; 
 
}

<div class="nav"> 
 
    <div class="topnav"></div> 
 
    <div class="bottomnav"></div> 
 
</div> 
 
<div class="topgraphic"> 
 
    <img alt="TopGraphic" class="auto-style1" src="Images/Topgraphic.jpg" /> 
 
    <asp:Image ID="Image1" runat="server" /> 
 
    <div class="textbox"> 
 
     <!-- <div class="topText"> 
 
     <h1>Demonstration</h1> 
 
     </div> --> 
 
    </div> 
 
</div>

Answer 1

Как это немного трудно по-настоящему понять, что ваш ищет, я здесь сделал предположение на основе существующего кода.

Это общий макет, который вы ищете?

* { 
 
    box-sizing: border-box; 
 
} 
 
html, body { 
 
    margin: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    color: gray; 
 
    padding: 1%; 
 
} 
 
.outer { 
 
    display: flex; 
 
    flex-flow: column; 
 
    height: 98%; 
 
    width: 90%; 
 
    margin: 0 auto; 
 
    box-shadow: 0px 0px 10px 0px #696868; 
 
} 
 
.top { 
 
    display: flex; 
 
    flex-flow: column; 
 
    background-color: white; 
 
} 
 
.middle { 
 
    background-color: lightblue; 
 
    background-image: url(http://lorempixel.com/400/100/sports/9/); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    clear: right; 
 
} 
 
    .middle .textbox { 
 
    float: right; 
 
    width: 30%; 
 
    height: 70px; 
 
    background-color: rgba(0,0,0,0.7); 
 
    } 
 
.content { 
 
    position: relative; 
 
    flex: 1 0 auto; 
 
    height: 0; 
 
} 
 
.content-inner { 
 
    background-color: white; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
}

<div class="outer"> 
 
    <div class="top"> 
 
    <div class="top">top top</div> 
 
    <div class="bottom">top bottom</div> 
 
    </div> 
 
    <div class="middle"> 
 
     <div class="textbox"> 
 
      text box 
 
     </div> 
 
    </div> 
 
    <div class="content"> 
 
    <div class="content-inner">content</div> 
 
    </div> 
 
</div>