容器类型CSS属性的“size”和“inline-size”有什么区别

Question

我正在尝试使用container-type属性来设置一个容器查询，当达到容器的特定高度时，该查询将更改子元素的对齐方式。

.snackbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  width: 500px;
  
  margin: 0 auto;
  padding: 12px;
  
  border-radius: 4px;
  
  color: white;
  background-color: #333;
  
  font-size: 14px;
  font-family: sans-serif;
}

.snackbar-inline-size {
  container-type: inline-size;
  container-name: mySnackbar;
}

.snackbar-size {
  container-type: size;
  container-name: mySnackbar;
}

.snackbar-size-fixed-height {
  container-type: size;
  container-name: mySnackbar;
  height: 100px;
}

.actions-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.actions-container button {
  margin-left: 12px;
}

@container mySnackbar (min-height: 40px) {
  .actions-container {
    align-self: flex-end;
  }
}

<h2>container-type: inline-size</h2>
<p>Container query min-height not working.</p>

<div class="snackbar snackbar-inline-size">
  <div class="message">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. 
  </div>
  <div class="actions-container">
    <button class="action-button">Action</button>
    <button class="close-button">X</button>
  </div>
</div>

   <hr/>

<h2>container-type: size</h2>
<p>Container query min-height not working.</p>

<div class="snackbar snackbar-size">
  <div class="message">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. 
  </div>
  <div class="actions-container">
    <button class="action-button">Action</button>
    <button class="close-button">X</button>
  </div>
</div>

   <hr/>

<h2>container-type: size, fixed height</h2>
<p>Container query min-height working. This is what I want, but without the fixed height.</p>

<div class="snackbar snackbar-size-fixed-height">
  <div class="message">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. 
  </div>
  <div class="actions-container">
    <button class="action-button">Action</button>
    <button class="close-button">X</button>
  </div>
</div>

我尝试过对container-type价值观进行实验，这些是我的发现：

1. 当 时container-type: inline-size，则@container mySnackBar (min-height: 40px)规则被忽略。
2. 当 时container-type: size，则@container mySnackBar (min-height: 40px)规则被忽略。
3. 当为 for 指定container-type: size和时（固定高度应 >= 40px），最后容器查询将变为活动状态，并且 会与对齐。height: 100px;.snackbar.actions-containerflex-end

看起来场景 2.container-type: size会弄乱.snackbar高度，因为它会折叠到0.

container-type: inline-size您能否解释一下指定或container-type: size指定时容器元素在幕后发生了什么？

是否可以min-height在不指定容器固定高度的情况下对 进行内容查询？（目标是让子元素控制容器的高度）

Answer 1

当您指定时，inline-size意味着仅考虑宽度来定义条件，但size会同时考虑宽度和高度。

当您激活高度条件时，元素无法再根据其内容调整大小，这就是它在您的情况下折叠的原因。

更详细信息：容器查询折叠元素的宽度

我不知道你想要实现什么，但你不能使用元素的高度来控制其内容，同时让相同的内容定义高度。容器查询将禁用第二条规则，因此您的内容将不再定义父元素的高度。