AFAIK The of container queries concept is the applying of the conditional CSS rules depending on unknown at advance container size. However, once container-type: size applied (what it required to make the container queries work), the height of the container become 0. It is to like setup the thermometer in the room and because of it the temperature in the room has become constant 0 by Celsius - it sounds crazy but it exactly what I am feeling about height has become 0 because of container-type: size.

My case

I have the table and I want to conditionally display/hide the .CalendarPage-DayCell-ScrollViewForLargeContainers and CalendarPage-DayCell-ButtonForSmallContainers, herewith the "Large" and "Small" is not only width - it also the height.

<td class="CalendarPage-DayCell">
    <div class="CalendarPage-DayCell-ContainerQueryProvider">
        <span class="CalendarPage-DayCell-Title">6</span>
        <div class="CalendarPage-DayCell-ScrollViewForLargeContainers">
            <!-- ... -->
        </div>
        <button class="CalendarPage-DayCell-ButtonForSmallContainers" type="button">
            <!-- ... -->
        </button>
    </div>
</td>

.CalendarPage-DayCell-ContainerQueryProvider {
  container-type: size;
  display: flex;
  flex-direction: column;
}

@container (max-width:99px) and (max-height:99px) {
  .CalendarPage-DayCell-ButtonForSmallContainers {
    background: #00f; /* Temporary styles for indication */
  }
}

@container (min-width:100px) and (min-height:100px) {
  .CalendarPage-DayCell-ButtonForSmallContainers {
    background: red; /* Temporary styles for indication */
  }
}

Initially I have added container-type: size; to the table cell (td) but looks like the container queries are incompatible with the table cell (please correct me if I am wrong). That is why I have been forced to add the .CalendarPage-DayCell-ContainerQueryProvider. However, with container-type: size make its height to 0:

Because the table is responsive, the height of cell and whole table is unknown at advance.

As Temani Afif said in the comments,

What is the practical benefit of container-type: size? --> only when the container is sized with something else than it's content (ex: a full screen height container). If your content is defining the height of the container (which is 80% of all the cases) simply forget about container-type: size.

The query container has disappoint me again, but in my case, the height: 100% (not the min-height: 100%) for the .CalendarPage-DayCell-ContainerQueryProvider was the solution.

.CalendarPage-DayCell-ContainerQueryProvider {
  container-type: size;
  display: flex;
  flex-direction: column;
  height: 100%
}