Задание нескольких значений максимальной ширины для элемента

Question

У меня есть элемент, который никогда не должен быть больше, чем, скажем, 90% ширины контейнера и никогда не превышают абсолютную ширину 800 пикселей.

Используя CSS, я могу указать либо

#element {
    max-width: 90%;
}

или

#element {
    max-width: 800px;
}

К сожалению, мне не известен такой синтаксис, как

#element {
    max-width: 90% 800px;
}

или

#element {
    max-width: max(90%, 800px);
}

, который выполняетТрюк.

Есть ли способ решить эту проблему только с помощью CSS?Я хотел бы избежать JavaScript здесь.

Я уже нашел эту тему , которая, к сожалению, не работает для меня.

Answer 1

Вы можете просто использовать:

#element {
    width: 90%;
    max-width: 800px;
}

Таким образом #element width всегда будет точно 90% от родителя, если оно меньше 800px или 800px в противном случае.

В качестве альтернативы, в зависимости от того, что вы пытаетесь сделать, вы должны использовать медиазапросы или элемент обтекания.