resize parent div after using transform: translate on a child tag

August 30, 2022

So after changing the position of a div using transform translate, the parent div does not resize accordingly to fill the white space. Any advice would be appreciated.

<script src="https://cdn.tailwindcss.com"></script>
<p>
Distance from top
</p>
<section>
  <div class="container mx-auto my-8">
    <div class="flex flex-col gap-4 px-4 font-bold">
      <div class=" bg-green-200 p-10 aspect-square w-7/12">
        <p>Lorum ipsum !</p>
      </div>
      <div class="-translate-y-16 self-end bg-slate-200 p-10 aspect-square w-7/12">
        <p>Lorum ipsum !</p>
      </div>
      <div class="-translate-y-32 bg-green-200 p-10 aspect-square w-7/12">
        <p>Lorum ipsum !</p>
      </div>
    </div>
  </div>
</section>
<p>
Distance from bottom
</p>

>Solution :

❌ I tried the translate way but not work,
❌ I tried the position way and still doesn’t work.
✅ but with the negative margin trick, is working!

-mt-16, -mt-32 class solve it,

mt means margin-top in plain CSS

and if you add - prefix, means negative value.

and that it, solved!

<script src="https://cdn.tailwindcss.com"></script>
<p>
  Distance from top
</p>
<section>
  <div class="container mx-auto my-8">
    <div class="flex flex-col gap-4 px-4 font-bold">
      <div class="bg-green-200 p-10 aspect-square w-7/12">
        <p>Lorum ipsum !</p>
      </div>
      <div class="-mt-16 self-end bg-slate-200 p-10 aspect-square w-7/12">
        <p>Lorum ipsum !</p>
      </div>
      <div class="-mt-32 bg-green-200 p-10 aspect-square w-7/12">
        <p>Lorum ipsum !</p>
      </div>
    </div>
  </div>
</section>
<p>
  Distance from bottom
</p>

if there is a space between the text and content is because of the container class, but is solved. (see Distance from bottom text in your example and in my mine, huge improvement)