CSS - @container不起作用，尽管它应该在Chrome 109中受支持

czq61nw1 于 2023-02-10 发布在其他

关注(0)|答案(1)|浏览(208)

我目前运行的是Chrome 109版本，在www.example.com上显示支持@container查询。尽管如此，我还是无法让它工作。我用错了吗？你们中有人能让它在浏览器中工作吗？caniuse.com it says that the @container query is supported. Despite of this I cannot get it to work. Am I using it wrong? Are any of you getting it to work in your browsers?

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  resize: horizontal;
  overflow: hidden;
}
.col1 {
  background-color: #ccc;
  height: 150px;
}
.col2 {
  background-color: #eee;
  height: 150px;
  container-type: inline-size;
}

@container (max-width: 150px) {
  .grid {
    background-color: red;
  }
}

<div class='grid'>
  <div class='col1'>1</div>
  <div class='col2'>2</div>
</div>

css

来源：https://stackoverflow.com/questions/75368385/css-container-is-not-working-even-though-it-is-suppose-to-be-supported-in-chr

1条答案

按热度按时间

k97glaaz1#

对不起，我是用在线翻译用英语写的。可能是理解上的心理错误。我的意思是容器类型必须在父元素上指定。例如，像这样：

.grid { 
    display: grid; 
    grid-template-columns: 1fr 2fr; 
    resize: horizontal;
    overflow: hidden; 
    container-type: inline-size; 
} 
.col1 { 
    background-color: #ccc; 
    height: 150px; 
} 
.col2 {
    background-color: #eee; 
    height: 150px; 
    /* container-type: inline-size;  */
}
@container (min-width: 150px) { 
    .col1 { background-color: red; } 
}

赞(0）回复(0）举报 2023-02-10

我来回答

CSS - @container不起作用，尽管它应该在Chrome 109中受支持

1条答案

相关问题

热门标签

最新问答