容器查詢的概念是根據未知的容器大小應用條件CSS規則。然而，一旦應用了container-type: size(使容器查詢工作所需的大小)，容器的高度就變成0。就像在房間里安裝溫度計一樣，因為它，房間里的溫度變得恒定--這聽起來很瘋狂，但這正是我對高度的感覺，因為容器的類型:大小。

我的案子 我有表格，我想有條件地顯示/隱藏。calendar page-day cell-scroll view for large containers和calendar page-day cell-button for small containers，這里的& quot大號& quot和& quot小& quot不僅僅是寬度，還有高度。

<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 */
  }
}

最初我添加了容器類型:大??；但是看起來容器查詢與表格單元不兼容(如果我錯了，請糾正我)。 這就是我被迫添加。calendar page-day cell-ContainerQueryProvider。但是，使用容器類型:大小使其高度為0:

因為表格是響應式的，所以事先不知道單元格和整個表格的高度。

嘗試設置最小高度:

.CalendarPage-DayCell-ContainerQueryProvider {
  container-type: size;
  display: flex;
  flex-direction: column;
  min-height: 1px; /* or any value that suits your design */
}

此外，考慮為。calendar page-day cell-scrollviewfor large containers和。基于容器大小顯示或隱藏calendar page-day cell-ButtonForSmallContainers元素。

正如Temani Afif在評論中所說，

集裝箱式的實際好處是什么:尺寸？-& gt；只有當 容器的大小不是由它的內容決定的(例如 全屏高度容器)。如果您的內容是定義高度 的容器(占所有情況的80%)簡單地忘記 容器類型:尺寸。

查詢容器又讓我失望了，但是在我的例子中，高度:100%(不是最小高度:100%)。calendar page-day cell-ContainerQueryProvider是解決方案。

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