Kevin Powell - CommunityKP-C
Kevin Powell - Community•15mo ago•
5 replies
Vito

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>
image.png
image.png
image.png
Was this page helpful?