Using Container Queries

[cgatian]

I'm reviewing Container Queries and it seems like a compelling feature! Granted this is my first time trying out CSS @container in general so I might misunderstand the feature in general.

I declared by containers and containerSizes just as the documentation suggests in my theme definition.

    containerNames: ['content'],
    containerSizes: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
    },

I then used the container query in a recipe:

     flexDirection: {
        base: 'row',
        '@content/sm': 'column',
      },

I'm expecting the element to be flexed with flexDirection: 'row' and when it becomes small it should change direction to column. However, because the outputted CSS is using min-width my container query is never triggered. Since the element always has a min width of > 40rem (unless I really shrink it down).

@container content (min-width: 40rem)

I can workaround this by reversing the logic, but something about that feels wrong (could be my misunderstanding of container queries!). To me, the base should be the style applied in all cases and only when the min-width is less than the container's size should the container query be applied.

Is this how container queries work or perhaps a design decision made by the panda team? The Responsive design options felt more intuitive to use. Container queries somehow feel a bit backward?