Question 340323 in Html Question posted in
Some basic documentation can be found here.

Html – How to prevent child inheriting parent height without assigning height using taiwind

I dont want child to inherit paren height and i want the child to expand according to the content in it. And dont want to assign height as well as i dont know much content will be in it.

<div class="flex w-full bg-red-400 p-5 h-screen">
  <div class="flex w-40 bg-yellow-400 p-5">
    Lorem ipsum is typically a corrupted version of De finibus bonorum et malorum, a 1st-century BC text by the Roman statesman and philosopher Cicero, with words altered, added, and removed to make it nonsensical and improper Latin. The first two words themselves are a truncation of dolorem
  </div>
</div>
Tags:

2

Answers


  1. 0

    Altough you could use position: absolute I wouldnt recommend doing that. In html/css please avoid doing things like that where the child is bigger than the parent. But on default the parent is going to expand as the child gets bigger if the height/width is not set.

    Login or Signup to reply.
  2. 0

    Please remove h-screen and add new property from tailwindcss to the second div element. overflow-auto

    https://tailwindcss.com/docs/overflow – Learn more about overflow class of tailwindcss.

    <div class="flex w-full bg-red-400 p-5">
  <div class="flex w-40 bg-yellow-400 p-5 overflow-auto">
    Lorem ipsum is typically a corrupted version of De finibus bonorum et malorum, a 1st-century BC text by the Roman statesman and philosopher Cicero, with words altered, added, and removed to make it nonsensical and improper Latin. The first two words themselves are a truncation of dolorem
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search