Tailwind css flex overflow-x w-1/4 not working

1
votes

How to make flex overflow-x in tailwind css when there i have 5 divs with w-1/4?

<div class"flex overflow-auto w-full relative">
  <div class="w-1/4"> sample </div>
  <div class="w-1/4"> sample </div>
  <div class="w-1/4"> sample </div>
  <div class="w-1/4"> sample </div>
  <div class="w-1/4"> sample </div>
</div>

What I'm expecting is that the fifth div will overflow but flex still displays the fifth div. How can i make it overflow the fifth div?

2
tailwind-css

2 Answers

0
votes

Not sure what are you trying to do. Do you want to put the fifth div into a new line with flex: wrap? Otherwise flex because it will try to squeeze in all the divs.

overflow-auto makes a vertical scrollbar but you have to limit the parent height.

0
votes

Just add flex-none on the inner divs 👍🏻

Old answer:

With TailwindJIT, use a min-width: min-w-[25%] or add your own scale in the tailwind.config.js as described here, for example:

module.exports = {
    theme: {
        minWidth: {
            '1/4': '25%',
        }
    }
}

And then use min-w-1/4.