Making an element a @container messes with the width of the component

[alexander-densley]

What version of @tailwindcss/container-queries are you using?

0.1.1

What version of Node.js are you using?

21.4

What browser are you using?

arc with chromium

What operating system are you using?

mac02

Reproduction repository

https://github.com/alexander-densley/permitify

Describe your issue

when I make an element a container, it seems to reduce the element to its min-width. confused as to how to use these if this is the expected behavior. would love any advice.

Screen.Recording.2024-09-14.at.10.34.59.PM.mov

[alexander-densley]

for context, there are no other uses of container in my code, i just noticed this behavior when I started trying to use it

[ericbf]

That’s expected because of how containers work in HTML/CSS. Any CSS container cannot take its width from its children. It must have its width derived regardless of children sizes. See this note about inline-size.

This is not related to this plugin, it’s just how CSS Containers work.

[alexander-densley]

@ericbf thanks!