Search code examples
htmlcsstailwind-css

Why is the first child's height is more than others in tailwind flex box?

The first child takes more space (height) than other children. As you see, I have not set height to any of the children. The issue persists even if I set a fixed height to all children. I could not find the issue. I want to make all children same in height.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial- 
scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div class="flex flex-wrap p-6 bg-gray-200 space-y-10">
      <div class="bg-blue-500 text-white p-4 rounded w-1/3 text- 
center">
        Child 1
      </div>
      <div class="bg-green-500 text-white p-4 rounded w-1/3  
text-center">
        Child 2
      </div>
      <div class="bg-red-500 text-white p-4 rounded w-1/3 text- 
center">
        Child 3
      </div>
      <div class="bg-purple-500 text-white p-4 rounded w-1/3 
text-center">
        Child 4
      </div>
      <div class="bg-teal-500 text-white p-4 rounded w-1/3 text- 
center">
        Child 5
      </div>
      <div class="bg-yellow-500 text-white p-4 rounded w-1/3 
text-center">
        Child 6
      </div>
    </div>
  </body>
</html>

Please check it here: https://jsfiddle.net/gd5aqz9e/

Solution

  • The issue is caused by the fact that you are using space-y-10 on the flex parent. This class adds margin-top to all elements but the first. Coupled with the fact that the child align is set to stretch (the default value). There are several ways to resolve this, as follows:

    Set align-items to something other that stretch:

    This will create an offset for the first child since (as mentioned before), it is the only child without any margin-top.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com/3.4.15"></script>
  </head>
  <body>
    <div class="flex flex-wrap p-6 bg-gray-200 space-y-10 items-start">
      <div class="bg-blue-500 text-white p-4 rounded w-1/3 text-center">
        Child 1
      </div>
      <div class="bg-green-500 text-white p-4 rounded w-1/3  text-center">
        Child 2
      </div>
      <div class="bg-red-500 text-white p-4 rounded w-1/3 text-center">
        Child 3
      </div>
      <div class="bg-purple-500 text-white p-4 rounded w-1/3 text-center">
        Child 4
      </div>
      <div class="bg-teal-500 text-white p-4 rounded w-1/3 text-center">
        Child 5
      </div>
      <div class="bg-yellow-500 text-white p-4 rounded w-1/3 text-center">
        Child 6
      </div>
    </div>
  </body>
</html>

    The same effect can be achieved by applying align-self to the first child:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com/3.4.15"></script>
  </head>
  <body>
    <div class="flex flex-wrap p-6 bg-gray-200 space-y-10">
      <div class="bg-blue-500 text-white p-4 rounded w-1/3 text-center self-start">
        Child 1
      </div>
      <div class="bg-green-500 text-white p-4 rounded w-1/3  text-center">
        Child 2
      </div>
      <div class="bg-red-500 text-white p-4 rounded w-1/3 text-center">
        Child 3
      </div>
      <div class="bg-purple-500 text-white p-4 rounded w-1/3 text-center">
        Child 4
      </div>
      <div class="bg-teal-500 text-white p-4 rounded w-1/3 text-center">
        Child 5
      </div>
      <div class="bg-yellow-500 text-white p-4 rounded w-1/3 text-center">
        Child 6
      </div>
    </div>
  </body>
</html>

    Use row-gap to space the children, instead of the space-y class.

    space-y-* isn't really meant for flex layouts. You could consider using row-gap via a gap-y-* class which integrates better with flex layouts:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com/3.4.15"></script>
  </head>
  <body>
    <div class="flex flex-wrap p-6 bg-gray-200 gap-y-10">
      <div class="bg-blue-500 text-white p-4 rounded w-1/3 text-center">
        Child 1
      </div>
      <div class="bg-green-500 text-white p-4 rounded w-1/3  text-center">
        Child 2
      </div>
      <div class="bg-red-500 text-white p-4 rounded w-1/3 text-center">
        Child 3
      </div>
      <div class="bg-purple-500 text-white p-4 rounded w-1/3 text-center">
        Child 4
      </div>
      <div class="bg-teal-500 text-white p-4 rounded w-1/3 text-center">
        Child 5
      </div>
      <div class="bg-yellow-500 text-white p-4 rounded w-1/3 text-center">
        Child 6
      </div>
    </div>
  </body>
</html>

    Remove the horizontal flex layout

    Again, space-y-* isn't really meant for flex layouts. You could consider removing the flex layout so the elements are displayed in a vertical layout, thus having the same height:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com/3.4.15"></script>
  </head>
  <body>
    <div class="p-6 bg-gray-200 space-y-10">
      <div class="bg-blue-500 text-white p-4 rounded w-1/3 text-center">
        Child 1
      </div>
      <div class="bg-green-500 text-white p-4 rounded w-1/3  text-center">
        Child 2
      </div>
      <div class="bg-red-500 text-white p-4 rounded w-1/3 text-center">
        Child 3
      </div>
      <div class="bg-purple-500 text-white p-4 rounded w-1/3 text-center">
        Child 4
      </div>
      <div class="bg-teal-500 text-white p-4 rounded w-1/3 text-center">
        Child 5
      </div>
      <div class="bg-yellow-500 text-white p-4 rounded w-1/3 text-center">
        Child 6
      </div>
    </div>
  </body>
</html>

    Homologate the margin-top of all children

    You could consider removing the space-y-6 class so all children have the same margin-top of 0:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com/3.4.15"></script>
  </head>
  <body>
    <div class="flex flex-wrap p-6 bg-gray-200">
      <div class="bg-blue-500 text-white p-4 rounded w-1/3 text-center">
        Child 1
      </div>
      <div class="bg-green-500 text-white p-4 rounded w-1/3  text-center">
        Child 2
      </div>
      <div class="bg-red-500 text-white p-4 rounded w-1/3 text-center">
        Child 3
      </div>
      <div class="bg-purple-500 text-white p-4 rounded w-1/3 text-center">
        Child 4
      </div>
      <div class="bg-teal-500 text-white p-4 rounded w-1/3 text-center">
        Child 5
      </div>
      <div class="bg-yellow-500 text-white p-4 rounded w-1/3 text-center">
        Child 6
      </div>
    </div>
  </body>
</html>

    You could consider giving all children margin-top of spacing.10:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com/3.4.15"></script>
  </head>
  <body>
    <div class="flex flex-wrap p-6 bg-gray-200 *:mt-10">
      <div class="bg-blue-500 text-white p-4 rounded w-1/3 text-center">
        Child 1
      </div>
      <div class="bg-green-500 text-white p-4 rounded w-1/3  text-center">
        Child 2
      </div>
      <div class="bg-red-500 text-white p-4 rounded w-1/3 text-center">
        Child 3
      </div>
      <div class="bg-purple-500 text-white p-4 rounded w-1/3 text-center">
        Child 4
      </div>
      <div class="bg-teal-500 text-white p-4 rounded w-1/3 text-center">
        Child 5
      </div>
      <div class="bg-yellow-500 text-white p-4 rounded w-1/3 text-center">
        Child 6
      </div>
    </div>
  </body>
</html>