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
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
No description
No description
3 Replies
! nier
! nier13mo ago
With some gap you should be fine I guess
No description
C_7
C_712mo 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
Bardacoon12mo 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>
Want results from more Discord servers?
Add your server