Css 带高度的容器查询不工作，但可随宽度调整

#box {
      container: box/inline-size;
      height: 200px;
    }

    @container box (height > 50px) {
      /* not work */
      article {
        background: skyblue ;
      }
    }

    @container box (width > 50px) {
      /* it works */
      article {
        color: blue;
      }
    }

#box {
 container: box/size; /* here */
 height: 200px;
}

@container box (height > 50px) {
 article {
   background: skyblue;
 }
}

@container box (width > 50px) {
 article {
   color: blue;
 }
}

Css相关问答推荐

当滚动到页脚时，是否可以隐藏固定元素？

当具有外部高度的网格项溢出时，为什么溢出滚动端口填充不应用于网格容器？

使用 Flex 容器，如何在右对齐所有 Flex 子项的同时赋予子图像完整宽度？

Nextjs Tailwind Marquee 组件溢出

更改行数时更改 CSS 网格列

在 dbc.Container 上方包含横幅 - Dash

如何使用props 为 Vue 中的组件创建动态背景图像？

CSS 媒体查询不为桌面版的圣杯响应式布局包装 Flexbox 容器元素

tailwind css 中的自定义组状态

预期失败时使用toHaveStyle进行测试

为什么我的 CSS 需要一个它似乎不需要的大括号？

如何创建一个与 Bootstrap 3 配合得很好的粘性页脚

flexbox 布局中的 Padding-bottom/top

导航栏中的 Bootstrap 3.0 按钮

css 单行或多行垂直对齐

如何在 html/css 中的图像旁边垂直居中文本？

CSS：在图像周围创建白光

我应该如何组织我的 CSS 文件的内容？

@font-face src： local - 如果用户已经拥有本地字体，如何使用它？

仅针对使用的类优化 Font Awesome