Flex grow issue
I am trying to grow the div when clicked. Its working fine but when add the content then its not working.
https://codesandbox.io/s/clever-christian-7unckn?file=/src/App.js
6 Replies
flex grow doesn't mean it will grow, it means it can grow if there is space for it to grow into.
Right now, the three elements are taking up all the available space.
Have it only have 1 elment, and then there is empty space, and when it's active it will grow to fill that space. No empty space, nowhere for it to grow into
Oh thanks, Kevin. Does the same principal apply to grid-col-span?
you can't animate something from 1 column to spanning multiple columns in grid.
What type of behavior are you after, you can probably do it with flexbox, just not by using grow like this.
Hmm yes with the grid span transition not working.
adding max-width with grow?
The easiest thing might be to set a
flex-basis of 100% on all of them, and then the "active" one get's a flex-basis: 200%
i donno what the classes are to do that with tailwind thooh thanks kevin that is what I want.