In my experience with web development, one recurring challenge is ensuring that everything stays contained within a div element. I often encounter situations where multiple nested divs and content cause styling nightmares when elements bleed out of their designated boundaries. For example:
When inspecting the element, you may notice that the banner-content div fails to encapsulate all of its associated content. The images and span elements extend beyond its confines, while the icon-wrapper does manage to contain everything (likely due to the img height being set at 100%).
While this may not seem like a major issue at present, it can become increasingly challenging when trying to align extensive content, forms, and responsive design features. It sometimes feels as though I need to resort to hacky code to achieve the desired layout. In reality, if everything remained within the prescribed dimensions of parent divs and elements, things would behave as expected.
Is there a way to compel divs to effectively envelop all child nodes within their respective confines?
.wrapper {
width:100%;
display:flex;
flex-direction:column;
}
.cool-banner {
display:flex;
height:60vh;
}
.banner-picture {
width:50%;
}
.banner-picture img {
object-fit: none;
object-position: center;
height: 100%;
width: 100%;
}
.banner-content {
display:flex;
flex-direction: column;
height:100%;
}
.icon-list {
display:flex;
}
.icon-wrapper {
display:flex;
flex-direction:column;
height:40vh;
}
.icon-wrapper img {
object-fit: contain;
object-position:center;
width:100%;
height:100%;
}<div class="wrapper">
<div class="cool-banner">
<div class="banner-picture">
<img src="https://cdn.shopify.com/s/files/1/1150/2512/files/WG_Grill_ShootBeside_Oct2017-7_dd4f32ad-38ac-4a49-8a3c-332ba067835e_810x540.jpg?v=1553613536"/>
</div>
<div class="banner-content">
<h1>I'm Content</h1>
<div class="icon-list">
<div class="icon-wrapper">
<img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/fire-silver.png?51152"/>
<span>Nice Fire</span>
</div>
<div class="icon-wrapper">
<img src="https://cdn.shopify.com/s/files/1/1150/2512/files/EPDA-Logo-small_x100-ConvertImage_small.png?v=1559164248"/>
<span>Nice Award</span>
</div>
</div>
</div>
</div>