0

I am currently struggling with container queries. As long as I just use min-width and max-width everything is fine and works well. As soon as I try to use logic operators like and/or it doesn´t work anymore.

.wrapper {
  width: 300px;
  container-name: wrapper;
  container-type: inline-size;
}

.box {
  background-color: #0000ff;
  color: #ffffff;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@container wrapper (min-width: 300px) {
  .box {
    background-color: #00ff00;
  }
}

@container wrapper (min-width: 300px) and (min-height: 0px) {
  .box {
    background-color: #ff0000;
  }
}
<div class="wrapper">
  <div class="box">
    <span>test</span>
  </div>
</div>

See the codepen here: https://codepen.io/Resolver1412/pen/dygxWKY

I would expect that the box would become red instead of green. Since the last container query would overwrite the previous one.

Anyone knows whats wrong or what might have happened? I currently use this chrome version: Version 112.0.5615.121

Max
  • 1,053
  • 1
  • 13
  • 34
  • 1
    To garner more feedback, you might try to rephrase your title as a question. Reference the stackoverflow how-to for more guidance: https://stackoverflow.com/help/how-to-ask – markmacw Jun 02 '23 at 12:43

2 Answers2

1

According to the docs:

The inline-size CSS property defines the horizontal or vertical size of an element's block, depending on its writing mode. It corresponds to either the width or the height property, depending on the value of writing-mode.

– inline-size | MDN Web Docs

In your example, since writing-mode has the default value of horizontal-tb, only width is usable in @container queries.

You can switch to container-type: size to use both inline and block size in queries:

.wrapper {
  width: 300px;
  height: 60px;
  container-name: wrapper;
  container-type: size;
}

@container wrapper (width >= 300px) and (height >= 0px) {
  .box {
    background-color: #ff0000;
  }
}

Try it:

.wrapper {
  width: 300px;
  height: 60px;
  container-name: wrapper;
  container-type: size;
}

.box {
  background-color: #0000ff;
  color: #ffffff;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@container wrapper (width >= 300px) {
  .box {
    background-color: #00ff00;
  }
}

@container wrapper (width >= 300px) and (height >= 0px) {
  .box {
    background-color: #ff0000;
  }
}
<div class="wrapper">
  <div class="box">
    <span>test</span>
  </div>
</div>

Or, you can use aspect-ratio instead of width and height:

@container wrapper (aspect-ratio > 1 / 2) {
  .box {
    background-color: #ff0000;
  }
}

Try it:

.wrapper {
  container-name: wrapper;
  container-type: size;
}

.box {
  background-color: #0000ff;
  color: #ffffff;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@container wrapper (width >= 300px) {
  .box {
    background-color: #00ff00;
  }
}

@container wrapper (aspect-ratio > 1 / 2) {
  .box {
    background-color: #ff0000;
  }
}
<div class="wrapper">
  <div class="box">
    <span>test</span>
  </div>
</div>
InSync
  • 4,851
  • 4
  • 8
  • 30
0

Change the container-type to size.

This causes the horizontal and vertical axis to be taken into account.

CSS_container_queries

.wrapper{
  width: 300px;
  container-name: wrapper;
  container-type: size;
}

.box{
  background-color: #0000ff;
  color: #ffffff;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@container wrapper (min-width: 300px) {
  .box {
    background-color: #00ff00;
  }
}

@container wrapper (min-width: 300px) and (min-height: 0px) {
  .box {
    background-color: #ff0000;
  }
}
<div class="wrapper">
   <div class="box">
     <span>test</span>
  </div>
</div>
tom
  • 9,550
  • 6
  • 30
  • 49