CODEWITHSUNDEEP
htmlcss
Robolisk
Robolisk

Reputation: 1792

Force elements to always be inside a DIV

One thing I always seem to fight within web development is keeping things inside a div element. I often run into issues where I have a list of div wrappers with more divs and content within, and eventually, one of them bleeds out and causes a nightmare when it comes to styling. An example if I may.

If you inspect the element you'll notice the banner-content div doesn't wrap all of the content. The images and span elements are outside of it's reach, even so the icon-wrapper content does (once again) wrap around everything. I believe I know that the answer to that one (the img height is set to 100%).

It doesn't seem that big of a problem now, but when trying to align things with much more content and forms and responsive design, it gets kinda crazy. It almost feels like I'm adding some hacky code to make it all form nicely. Realistically it seems like everything stayed within my parent div sizes and elements, everything would behave as expected.

Is there a way to force divs to contain all the child node's within its reach? 

.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>

Upvotes: 0

Views: 3264

Answers (2)

Darcy
Darcy

Reputation: 1

Sometimes you just cant fit your size 10 foot into a size 7 shoe.

That image takes up 50%, while not having enough real estate for the other column's content. Case in point - In your example, removing the flex-direction:column of .banner-content wraps all children as you may have intended

Upvotes: 0

Miles Grover
Miles Grover

Reputation: 609

If I'm understanding the question, there are a number of ways to constrain children so that they don't extend outside of their parent.

If you set overflow: hidden on the parent, children that are wider or taller than the parent will clip at the edges of the parent, though their width will remain the same.

You can set max-width: 100% on children to keep them from growing wider than the parent's width.

You can also set display: flex on the parent and min-width: 0 on the children to constrain children to the parent.

Things get a little dicier if you need to constrain heights, because children typically only respect their parent's height if the parent's height is explicitly set.

Upvotes: 1

Related Questions