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

Html – tailwind/css div won't expand

I’m trying to get the light blue div to take up the whole screen space, but it won’t. Additionally, the dark blue div shows even when no content is in it, but not the light blue one despite setting max-height (tried with min-height too)

<body>
    <div class="bg-blue-500 min-w-full min-h-10"></div>
    <div class="bg-blue-400 max-h-full w-1/4">a</div>
<body>

Setting min-h-10 and below works for the light blue (bg-blue-400) but not any value above that.

what it looks like

Tags:

2

Answers


  1. 0

    Try

    <body>
    <div class="bg-blue-500 min-w-full h-10"></div>
    <div class="bg-blue-400 h-screen w-screen w-1/4">a</div>
</body>
    Login or Signup to reply.
  2. 0

    min-height works even when there is no height, and the max-height works only when there is height.

    A minimum guarantees a minimum and a max can be greater than the default value.

    codesandbox sample

    https://codesandbox.io/p/sandbox/peaceful-christian-35ynj8?file=%2Findex.html%3A12%2C43

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search