Unexpected behavior when using flex, flex-1, and overflow-x-auto

[dfallman]

I've run into this a few times and I just don't get why this is consistently working for me:

<div class='flex'>
   <div class='flex-1 overflow-x-auto [width:1px]'>
      Content

but NOT this:

<div class='flex'>
   <div class='flex-1 overflow-x-auto w-full'>
      Content

I assume this is not a bug in Tailwind, CSS, or any of the browsers, but my question is why do I have to set a specific pixel width value for overflow-x-auto to work with flex-1, it doesn't seem to work with percentage-based values like w-full?

Also, what's a bit weird to me, is that it doesn't seem to matter what the pixel value is, but it needs to be set for overflow-x-auto to work. That's why I set it to 1px.

Just curious what the reason for this could be?

[wongjn]

Seems to work for both cases in this Tailwind Play. Could you provide a Tailwind Play that reproduces the behavior you are experiencing please?

[dfallman]

Thanks, yes, it does work as advertised in simple examples. In my real-world scenario that's not really possible to turn into a Tailwind Play, I need to set 1px width (or any fixed width, not a percentage width) for the overflow to kick in. Still not quite sure why though to be honest.

We're using splitjs to set different horizontal widths for different parts of the UI, so perhaps it does something to the DOM that confuses the browser?

[wongjn]

You should be able to capture an instance of the DOM when it doesn't work and pop it into a Play. Try copying from the Elements/DOM panel of the browser's developer tools. Be sure to add any non-Tailwind CSS into the CSS section too.