Kevin Powell - Community•2mo ago

Why does child element cause parent to overflow

I don't understand why setting overflow hidden on the page info section causes the section to properly fit within the bottoms section container. Without that, the long website link causes the content to overflow the container. I have a solution but I just want to know why it works and also if there's a different way to do this because this feels hacky idk? I was trying to think of a way to set the width of the section containing the title to fit within the container but couldn't come up with a solution.

     <div className="">
      {/* top section */}
      <div className="h-[175px] rounded-t-xl bg-yellow-100">
        {/* TODO: insert image here with object cover */}
        {title}
      </div>
     {/* bottom section  */}
      <div className="flex items-center gap-x-2 p-3 w-full rounded-b-xl bg-gray-200/70">
        <div className="h-[50px] w-[50px] flex items-center justify-center shrink-0 outline outline-1 outline-black p-1 bg-orange-300">
          Text
        </div>
        {/* page info  */}
        {/* changing this style to className="overflow-hidden" works  */}
        <div className="flex-grow">
          <div className="font-bold text-lg">{title}</div>
          {/* NOTE: Ellipsis only works when overflow hidden is set and white space nowrap */}
          <div className="text-gray-400 text-sm truncate">{href}</div>
        </div>
      </div>
    </div>

     <div className="">
      {/* top section */}
      <div className="h-[175px] rounded-t-xl bg-yellow-100">
        {/* TODO: insert image here with object cover */}
        {title}
      </div>
     {/* bottom section  */}
      <div className="flex items-center gap-x-2 p-3 w-full rounded-b-xl bg-gray-200/70">
        <div className="h-[50px] w-[50px] flex items-center justify-center shrink-0 outline outline-1 outline-black p-1 bg-orange-300">
          Text
        </div>
        {/* page info  */}
        {/* changing this style to className="overflow-hidden" works  */}
        <div className="flex-grow">
          <div className="font-bold text-lg">{title}</div>
          {/* NOTE: Ellipsis only works when overflow hidden is set and white space nowrap */}
          <div className="text-gray-400 text-sm truncate">{href}</div>
        </div>
      </div>
    </div>

5 Replies

VitoOP•2mo ago

This shows how the section now fits within the padding once overflow hidden is set.

snxxwyy•2mo ago

i don't use tailwind but to me it looks like you're setting a fixed width and height with h-[50px] w-[50px]. You shouldn't do that, let the content decide the size of the container. That's why it's overflowing. overflow: hidden hides it because as it says, it's hiding the overflow.

pangalan1•2mo ago

that isn't the problem. 50px is too small to even cause overflow issue. also, this is an exception since it is an icon which you don't want to scale.

snxxwyy•2mo ago

My bad then. Didn’t see that.

pangalan1•2mo ago

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

MDN Web Docs

overflow-wrap - CSS: Cascading Style Sheets | MDN

The overflow-wrap CSS property applies to text, setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box.

Gaming

Programming

Why does child element cause parent to overflow