最大のCalcの、またはCSSでのCALCの最大

Question

それはCSSでこの

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

または

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

ような何かをすることは可能ですか？

Answer 1

いいえできません。 max()とmin()はCSS3値とユニットから削除されました。しかし、彼らはre-introduced in CSS4 Values and Unitsかもしれません。現在のところ仕様はありません。calc()仕様では、いずれかがcalc()関数内で有効であることは記載されていません。

Answer 2

回避方法は、widthを使用することです。

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

Answer 3

「純粋な」CSSのソリューションは、実際に今、メディアクエリを使用して可能である：

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

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

Answer 4

@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>