Calc max или max calc в CSS

Ответ 1

Нет, вы не можете. max() и min() были исключены из значений и единиц CSS3. Однако они могут быть повторно введены в значениях и единицах CSS4. В настоящее время для них нет спецификации, а спецификация calc() не упоминает, что они действительны внутри функции calc().

Ответ 2

"Чистое" решение css теперь возможно с использованием медиа-запросов:

.yourselector {
  max-width: calc(100% - 80px);
}

@media screen and (max-width: 500px) {
  .yourselector {
    max-width: 500px;
  }
}

Ответ 3

Обходным путем было бы использовать width.

max-width: 500px;
width: calc(100% - 80px);

Ответ 4

Хотя ответ @david-mangold, приведенный выше, был "близким", он был неверным.
(Вы можете использовать его решение, если вы хотите минимальную ширину вместо максимальной ширины).

Это решение демонстрирует, что комментарий @gert-sønderby к этому ответу работает:
Ответ должен был использовать min-width, а не max-width.

Вот что он должен был сказать:

min-width: 500px;
width: calc(100% - 80px);

Да, используйте min-width плюс width, чтобы эмулировать функцию max().

Вот кодекс (проще увидеть демо на CodePen, и вы можете отредактировать его для собственного тестирования).

.parent600, .parent500, .parent400 {
    height: 80px;
    border: 1px solid lightgrey;
}
.parent600 {
    width: 600px;
}
.parent500 {
    width: 500px;
}
.parent400 {
    width: 400px;
}

.parent600 .child, .parent500 .child, .parent400 .child {
    min-width: 500px;
    width: calc(100% - 80px);
    border: 1px solid blue;
    height:60px;
}

.ruler600 {
    width: 600px;
    border: 1px solid green;
    background-color: lightgreen;
    height: 20px;
    margin-bottom: 40px;
}
.width500 {
    height: 20px;
    width: 500px;
    background-color: lightyellow;
    float: left;
}
.width80 {
    height: 20px;
    width: 80px;
    background-color: green;
    float: right;
}

.parent600 .wrong, .parent500 .wrong, .parent400 .wrong {
    max-width: 500px;
    width: calc(100% - 80px);
    border: 1px solid red;
    height:60px;
}

<h2>(Min) min-width correctly gives us the Larger dimension: </h2>
<div class="parent600">
    600px parent
    <div class="child">child is max(500px, 600px - 80px) = max(500px, 520px) = 520px</div>
</div>

<div class="ruler600"><div class="width500">500px</div>20<div class="width80">80px</div></div>

<div class="parent500">
    500px parent
    <div class="child">child is max(500px, 500px - 80px) = max(500px, 420px) = 500px</div>
</div>

<div class="ruler600"><div class="width500">500px</div><div class="width80">80px</div></div>

<div class="parent400">
    400px parent (child expands to width of 500px)
    <div class="child">child is max(500px, 400px - 80px) = max(500px, 320px) = 500px</div>
</div>
<div class="ruler600"><div class="width500">500px</div><div class="width80">80px</div></div>


<h2>(Max) max-width <em>incorrectly</em> gives us the Smaller dimension: </h2>
<div class="parent400">
    400px parent
    <div class="wrong">child is min(500px, 400px - 80px) = min(500px, 320px) = 320px</div>
</div>
<div class="ruler600"><div class="width500">500px</div><div class="width80">80px</div></div>

<div class="parent500">
    500px parent
    <div class="wrong">child is min(500px, 500px - 80px) = min(500px, 420px) = 420px</div>
</div>

<div class="ruler600"><div class="width500">500px</div><div class="width80">80px</div></div>

<div class="parent600">
    600px parent
    <div class="wrong">child is min(500px, 600px - 80px) = min(500px, 520px) = 500px</div>
</div>

<div class="ruler600"><div class="width500">500px</div>20<div class="width80">80px</div></div>

Ответ 5

@Amaud Есть ли альтернатива для достижения того же результата?

Существует не-js чистый подход css, который достиг бы подобных результатов. Вам нужно будет настроить отступы/отступы контейнера родительских элементов.

.parent {
    padding: 0 50px 0 0;
    width: calc(50%-50px);
    background-color: #000;
}

.parent .child {
    max-width:100%;
    height:50px;
    background-color: #999;
}

<div class="parent">
  <div class="child"></div>
</div>