CSS максимальная высота с наследованием

Question

Ссылка CSS явно говорит, что max-height не наследуется.Проблема в том, что я хочу, чтобы это было унаследовано.Тем не менее, я не могу получить правильное заклинание CSS.Дело в том, что у меня есть класс CSS, который я хотел бы применить к DIV, а затем обеспечить, чтобы все дочерние элементы указанного DIV соблюдали свойство max-height:

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

* {
  max-height: inherit;
}

К сожалению, приведенный выше код не работает,Например, в инструментах разработки Chrome параметр «наследовать» max-height вычеркивается как отключенный.Есть идеи как это исправить?

Answer 1

Может, я не понимаю, но разве это не должно работать?

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

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

Это были бы все дочерние элементы .my-viewer. Если это не сработает, то должно работать max-height:100%, поскольку они являются детьми .my-viewer. И я предполагаю, что только .my-viewer divs - это то, что вы хотите наследовать, а не все элементы, такие как a p и т. Д.

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

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

РЕДАКТИРОВАТЬ: Если вы хотите быть более конкретным, используйте селектор >.

.my-viewer > * или .my-viewer > div

Answer 2

Возможно, вам следует использовать другой селектор CSS:

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

Но учтите, что это все равно не будет работать в IE (или, по крайней мере, до IE 8), см. здесь

Answer 3

Это должно работать

* {   max-height: inherit; }

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