Trouble understanding containers, why does it work on my blog section but not on my article?

Question

I'm trying to understand properly the @container rules in CSS AND I don't get why my container work's on my .blog-list but not on my article ? I change the background of the article and it's perfectly fine in the @container blog and then I try to change the color of the text based on the size of the article in the @container article, but nothing is responding.

I have a pen to try out this right here

<div class="blog-list">
  <article>
    <figure>
      <img src="https://images.pexels.com/photos/1743165/pexels-photo-1743165.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Image">
    </figure>
    <div class="article-content">
    <h3><a href="#">Mon titre</a></h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin luctus erat neque, eu pulvinar justo efficitur et. Vivamus vel aliquam massa, rutrum sollicitudin ante. </p>
    <span class="link">En savoir plus</span>
    </div>
  </article>
  <article>
    <figure>
      <img src="https://images.pexels.com/photos/1743165/pexels-photo-1743165.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Image">
    </figure>
    <div class="article-content">
    <h3><a href="#">Mon titre</a></h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin luctus erat neque, eu pulvinar justo efficitur et. Vivamus vel aliquam massa, rutrum sollicitudin ante. </p>
    <span class="link">En savoir plus</span>
    </div>
  </article>
  <article>
    <figure>
      <img src="https://images.pexels.com/photos/1743165/pexels-photo-1743165.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Image">
    </figure>
    <div class="article-content">
    <h3><a href="#">Mon titre</a></h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin luctus erat neque, eu pulvinar justo efficitur et. Vivamus vel aliquam massa, rutrum sollicitudin ante. </p>
    <span class="link">En savoir plus</span>
    </div>
  </article>
</div>

.blog-list {
  container-type: inline-size;
  container-name: blog;
}

article {
  background: white;
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
  border-radius: 8px;
  overflow: hidden;
  background: yellow;
  container-name: article;
}

.article-content {
  padding: clamp(10px, 2.5vw, 2em) clamp(10px, 3vw, 2em);
  color: blue;
}

@container blog (max-width: 480px) {
  article {
    background: red;
  }
}

@container blog (min-width: 900px) {
  article {
    background: green;
  }
}

@container article (min-width: 200px) {
  .article-content {
    color: pink;
    background: pink;
  }
}

At first, I thought that perhaps only certain properties could be modified. It would have seemed strange to limit the possibilities, but at least I tried , and to no one's surprise, nothing changed.

Then I tried modifying the condition in @container article (min-width: 200px) in several different ways (width < 300px) or (max-width: 300px) and still nothing changes.

From what I understand, when I declare an @container XY, if the element on which I declare the container-name: XY; property matches the condition, it executes the different styles declared?

So what do I miss?

Answer 1

I think there might be a problem with the container name. When I tried the following code:

@container (min-width: 200px) {
  .article-content {
    color: pink;
    background: pink;
  }
}

the color and background of .article-content is pink. But for using the syntax you provided, I added container-type: inline-size; to article:

article {
  background: white;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  overflow: hidden;
  background: yellow;
  container-name: article;
  container-type: inline-size; /* THIS LINE WAS ADDED */
}

The following code results in pink color and background when min-width of .article-content is 200px.

---

Answer 2

You are missing container-type declaration which is more important than the name. The name alone is useless. But if you make article containers, they will collapse because they can no more get sized by their content.

A gold rule when using a @container: never make an element whose content define its size a container. Flex items, inline-block, float, position: absolute/fixed, etc all of them cannot be container unless you explicitly define their width.

Related: Container query collapses width of element