Container-type: inline-size makes container have 0 width

Question

I have recently started using container queries in css and I have this example where I want an element not to be displayed if container width is smaller that a threshold

<Flex class="container">
   <span> ... </span>
   <span .. </span>
   <span class="hideIfOverflow"> ... </span>
</Flex>

and the css file

.container {
    align-items: center;
    container: listingStats / inline-size;
}

.hideIfOverflow{
    @container listingStats (max-width: 23rem){
        display: none;
    }
}

(Here Flex is just equivalent to <div style="display: flex">...</div>)

Howver the end result is that the contained element whole Flex in dev tools seems to have 0 width (writer-mode is set to horizontal-tb).

example

I tried searching online and researching inline-size, but it doesn't seem that's much about it. I am really not sure what I am missing here