Calc của max, hoặc tối đa của calc trong CSS

Question

Có thể làm một cái gì đó như thế này

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

hoặc

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

trong CSS?

Answer 1

Không, bạn không thể. max() và min() đã bị xóa khỏi Giá trị và Đơn vị CSS3. Tuy nhiên, chúng có thể là re-introduced in CSS4 Values and Units. Hiện tại không có thông số kỹ thuật cho chúng, và thông số calc() không đề cập đến hoặc là hợp lệ bên trong một hàm calc().

Answer 2

Giải pháp thay thế sẽ là tự sử dụng width.

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

Answer 3

Một giải pháp css 'tinh khiết' thực sự có thể bây giờ sử dụng truy vấn phương tiện truyền thông:

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

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

Answer 4

@Amaud Có một sự thay thế để có kết quả tương tự?

Có phương pháp tiếp cận css thuần túy không phải js sẽ đạt được kết quả tương tự. Bạn sẽ cần phải điều chỉnh phần tử/vùng chứa của phần tử cha.

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