I am designing a webpage layout that includes 2 navigation bars (top), a top-graphic (middle) flexbox, and a content flexbox (bottom).
Within the top-graphic flexbox, I want to add a black box for text. However, I am facing issues with the box overflowing beyond the boundaries of its parent element, extending into the content flexbox when the page is resized. I need the box to remain within the confines of its parent element and adjust its size according to the parent, preventing overlap with the content flexbox upon resizing.
.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>