Child element overflows parent [closed] - html

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have a body consisting of 2 navigation bars(top), top-graphic(middle) flexbox and a content flexbox(bottom).
Within the top-graphic flexbox I want to insert a black box in which I can put text. When I make this box, it doesnt overflow the top of the parent box, however it overflows the bottom and the right side of the parent, continueing into my content box when I resize the page. I want my box to stay inside the boundaries of its parent element and take my parent into respect when I set my width/height, so that it doesnt overlap the content flexbox when I resize the website.
.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

As it's a little bit difficult to really understand what your a looking for, I here made a guess based on your existing code.
Is this an overall layout you are looking for?
* {
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>