Kevin Powell - Community•7mo ago

Grid as a child of a flex doesn't work properly

Code: https://play.tailwindcss.com/XSMPnICSXN As you can see the green squares are overlapping each other and the red container is overlapping them as well. What I want to achieve is something like that. I tried using width: 100% as well but it still doesnt work

Tailwind Play

An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.

3 Replies

! nier•7mo ago

With some gap you should be fine I guess

C_7•7mo ago

<div class="flex h-screen flex-row gap-2 p-2">
  <!--  -->
  <aside>
    <div class="grid grid-cols-2 gap-2">
      <div class="aspect-square w-16 rounded-md bg-green-500"></div>
      <div class="aspect-square w-16 rounded-md bg-green-500"></div>
      <div class="aspect-square w-16 rounded-md bg-green-500"></div>
    </div>
  </aside>

  <!--  -->
  <div class="min-w-[50%] flex-1 rounded-md bg-red-500">
    <div>aclaksdjfsdfa claksdjfsdfaclaksdjfsdfacla ksdjfsdfaclaksd jfsdfaclaksdjfsdfaclaksdjfsd faclaksdjfsdf aclaksdjfsd faclak sdjfsdfa claksdjfsdf</div>
  </div>
</div>

<div class="flex h-screen flex-row gap-2 p-2">
  <!--  -->
  <aside>
    <div class="grid grid-cols-2 gap-2">
      <div class="aspect-square w-16 rounded-md bg-green-500"></div>
      <div class="aspect-square w-16 rounded-md bg-green-500"></div>
      <div class="aspect-square w-16 rounded-md bg-green-500"></div>
    </div>
  </aside>

  <!--  -->
  <div class="min-w-[50%] flex-1 rounded-md bg-red-500">
    <div>aclaksdjfsdfa claksdjfsdfaclaksdjfsdfacla ksdjfsdfaclaksd jfsdfaclaksdjfsdfaclaksdjfsd faclaksdjfsdf aclaksdjfsd faclak sdjfsdfa claksdjfsdf</div>
  </div>
</div>

Bardacoon•7mo ago

Thank you. flex-1 worked. Seems like I have to have a better understanding of flex-basis Anyway I ended up with this solution instead

  <!-- used grid instead of flex -->
<div class="grid grid-cols-[auto_1fr]"> 
  <aside>
    <div class="grid grid-cols-2">
      <div class="h-16 w-16 bg-blue-500/50"></div>
      <div class="h-16 w-16 bg-yellow-500/50"></div>
      <div class="h-16 w-16 bg-green-500/50"></div>
    </div>
  </aside>
  <!-- added min-w-0 -->
  <div class="bg-red-500/50 flex-grow min-w-0">
    <div> aclaksdjfsdfa claksdjfsdfaclaksdjfsdfacla ksdjfsdfaclaksd jfsdfaclaksdjfsdfaclaksdjfsd faclaksdjfsdf aclaksdjfsd faclak sdjfsdfa claksdjfsdf</div>
  </div>
</div>

  <!-- used grid instead of flex -->
<div class="grid grid-cols-[auto_1fr]"> 
  <aside>
    <div class="grid grid-cols-2">
      <div class="h-16 w-16 bg-blue-500/50"></div>
      <div class="h-16 w-16 bg-yellow-500/50"></div>
      <div class="h-16 w-16 bg-green-500/50"></div>
    </div>
  </aside>
  <!-- added min-w-0 -->
  <div class="bg-red-500/50 flex-grow min-w-0">
    <div> aclaksdjfsdfa claksdjfsdfaclaksdjfsdfacla ksdjfsdfaclaksd jfsdfaclaksdjfsdfaclaksdjfsd faclaksdjfsdf aclaksdjfsd faclak sdjfsdfa claksdjfsdf</div>
  </div>
</div>

Gaming

Programming

Grid as a child of a flex doesn't work properly