我試圖使用容器類型屬性來設(shè)置一個(gè)容器查詢，當(dāng)達(dá)到容器的特定高度時(shí)，它將改變子元素的對(duì)齊方式。

.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>

當(dāng)您指定inline-size時(shí)，這意味著在定義條件時(shí)只考慮寬度，而size將同時(shí)考慮寬度和高度。

當(dāng)您激活高度條件時(shí)，該元素不能再根據(jù)其內(nèi)容調(diào)整大小，這就是它在您的情況下折疊的原因。

更多細(xì)節(jié):容器查詢折疊元素的寬度

我不知道你想達(dá)到什么目的，但是你不能用一個(gè)元素的高度來控制它的內(nèi)容，同時(shí)用同樣的內(nèi)容來定義高度。容器查詢將禁用第二個(gè)規(guī)則，因此您的內(nèi)容將不再定義父元素的高度。

inline-size考慮& quot邏輯& quot例如，如果您對(duì)文本使用不同的方向，inline-size將會(huì)起相同的作用。

另一方面，大小是基于物理世界(你的用戶設(shè)備)的，所以它不適應(yīng)文本，而是適應(yīng)所用屏幕的大小。

有關(guān)邏輯屬性映射的更多信息:https://developer . Mozilla . org/en-US/docs/Web/CSS/CSS _ logical _ properties _ and _ values/Basic _ concepts _ of _ logical _ properties _ and _ values # why _ do _ we _ need _ logical _ properties