3 replies

Container Query units - vertical unit all evaluate to zero

I think I've fallen into a pitfall with container query units.

100cqb

100cqb

100cqb

100cqb and

100cqh

100cqh

100cqh

100cqh are evaluating to zero, but

100cqi

100cqi

100cqi

100cqi and

100cqw

100cqw

100cqw

100cqw are working as expected.

Here's a simplified version I want I believe is all my relevant css:

.parent {
  container-name: foo;
  container-type: size;
  min-height: 500px;
  display: block;
}
.child {
  height: 200px;
  min-height: 100px;
  max-height: calc(100cqh - 64px);
  resize: vertical;
}

.parent {
  container-name: foo;
  container-type: size;
  min-height: 500px;
  display: block;
}
.child {
  height: 200px;
  min-height: 100px;
  max-height: calc(100cqh - 64px);
  resize: vertical;
}

.parent {
  container-name: foo;
  container-type: size;
  min-height: 500px;
  display: block;
}
.child {
  height: 200px;
  min-height: 100px;
  max-height: calc(100cqh - 64px);
  resize: vertical;
}

.parent {
  container-name: foo;
  container-type: size;
  min-height: 500px;
  display: block;
}
.child {
  height: 200px;
  min-height: 100px;
  max-height: calc(100cqh - 64px);
  resize: vertical;
}

Any ideas to the cause of why my

max-height

max-height

max-height

max-height is coming out as

0px

0px

0px

0px instead of >=

436px

436px

436px

436px?

Container Query units - vertical unit all evaluate to zero

Similar Threads

Similar Threads

Similar Threads