Trong khi câu trả lời của @ david-mangold ở trên , là "gần" thì nó không chính xác.
(Bạn có thể sử dụng giải pháp của anh ấy nếu bạn muốn chiều rộng tối thiểu , thay vì chiều rộng tối đa ).
Giải pháp này chứng minh rằng bình luận @ gert-sønderby cho câu trả lời đó hoạt động:
Câu trả lời lẽ ra nên sử dụng min-width, không phải max-width.
Đây là những gì nó đáng lẽ phải nói:
min-width: 500px;
width: calc(100% - 80px);
Có, sử dụng chiều rộng tối thiểu cộng với chiều rộng để mô phỏng hàm max () .
Đây là codepen (dễ dàng hơn để xem bản demo trên CodePen và bạn có thể chỉnh sửa nó để thử nghiệm của riêng mình).
.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>
Điều đó nói rằng, câu trả lời của @ andy ở trên có thể dễ dàng hơn để suy luận và có thể phù hợp hơn trong nhiều trường hợp sử dụng.
Cũng lưu ý rằng cuối cùng a max()và một min()hàm có thể được đưa vào CSS, nhưng kể từ tháng 4 năm 2019, nó không phải là một phần của thông số kỹ thuật.