Kevin Powell - Community•2y ago

Container Query units - vertical unit all evaluate to zero

I think I've fallen into a pitfall with container query units. 100cqb and 100cqh are evaluating to zero, but 100cqi and 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;
}

Any ideas to the cause of why my max-height is coming out as 0px instead of >= 436px?

3 Replies

Kevin Powell•2y ago

Because the .parent doesn't have a defined height. min-height isn't a set value, it's a minimum value... so it could be that, or it could be bigger. For cqh to work, it needs a known value to work from, so it needs a height . For min-height to work, it would need to first look at the child to figure out the height, which would then change the height of the child, which makes for circlular logic. Using container-type: size we're saying that the children play no role in the height, so it goes to 0.

BlueBekaOP•2y ago

that makes sense. The min-height is actually being set by my framework but it really acts as height as there is no way for it to get bigger that that value (it has it's own scroll context to handle overflow). Hopefully I can figure out an easy way to make the framework set an actual height.

Kevin Powell•2y ago

good luck!

Gaming

Programming

Container Query units - vertical unit all evaluate to zero