htmlcsscontainer-queries

What is the difference between "size" and "inline-size" of container-type CSS property

I am trying to use container-type property to set up a container query that will change alignment of child element, when certain height of container is reached.

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

I've tried to experiment with container-type values and these are my findings:

  1. when container-type: inline-size, then @container mySnackBar (min-height: 40px) rule is ignored.
  2. when container-type: size, then @container mySnackBar (min-height: 40px) rule is ignored.
  3. when container-type: size and height: 100px; is specified for a for .snackbar (fixed height should be >= 40px) , then finally the container query becomes active and the .actions-container becomes aligned to flex-end.

Seems like the scenario 2. container-type: size will mess up the .snackbar height, because it collapses to 0.

Can you please explain what's happening under the hood with container element when either container-type: inline-size or container-type: size is specified?

And is it possible to have a content query for min-height, while not specifying the fixed height on the container? (Goal is to let the child elements control the height of the container)

Solution

  • When you specify inline-size it means that only the width will be considered to define the condition but size will consider both width and height.

    And when you activate the height condition, the element can no more be sized with its content that's why it collapses in your case.

    More detail: Container query collapses width of element

    I don't know what you want to achieve but you cannot use the height of an element to control its content and at the same time have that same content define the height. container query will disable the second rule so your content will no more define the height of the parent element.