CSS max-height with inherit

Question

The CSS reference explicitly says that max-height is not inherited. Problem is, I want it to be inherited. However, I can't seem to get the correct CSS incantation. Thing is, I have a CSS class that I'd like to apply to DIVs and then enforce that all children of said DIV honor the max-height property:

.my-viewer {
  max-height: 800px;
}

* {
  max-height: inherit;
}

Unfortunately, the above code does not work. In the Chrome development tools, for example, the 'inherit' setting of `max-height' is crossed out, as disabled. Any idea how to fix this?

Answer 1

Maybe I'm not understanding but shouldn't this work?

.my-viewer {
  max-height: 800px;
}

.my-viewer * {
  max-height: inherit;
}

That would be all children elements of .my-viewer. If that doesn't work, what should work is max-height:100% as they are children of .my-viewer. And I'm assuming only .my-viewer divs are what you want to inherit, not all elements such as a p and so on.

.my-viewer {
  max-height: 800px;
}

.my-viewer div {
  position:relative;
  max-height: 100%;
}

EDIT: If you're looking to be more specific use the > selector.

.my-viewer > * or .my-viewer > div