5 replies

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>

KP-C

Kevin Powell - Community•16mo ago•

5 replies

Vito

Why does child element cause parent to overflow

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

Why does child element cause parent to overflow

Why does child element cause parent to overflow

Similar Threads

Similar Threads

Similar Threads