How to fill remaining empty space if element using translate-x using tailwind CSS

odie jordie 0
Viewed 11

i have problem with filling empty space, if parent div using display flex, and children have translate-x class, here some example code

<div class="flex h-screen w-screen">
  <div class="w-1/3 -translate-x-10 bg-red-200"></div>
  <div class="w-full bg-red-400"></div>
</div>

it show like this enter image description here

how do i fill the empty space with red if i change the translate-x value

tailwind-css
1 Answers

First thing that comes to mind is you could try adding a background color to the parent div like assuming you want the darker red. There are probably other methods but if this one works for your use case it's pretty simple.

<div class="flex h-screen w-screen bg-red-400">
    <div class="w-1/3 -translate-x-10 bg-red-200"></div>
    <div class="w-full bg-red-400"></div>
</div>
NotDavid0
Related