幅・高さ
max-width
最大幅を指定する
| value | description |
|---|---|
100px | pxで幅を指定する |
20rem | remで幅を指定する |
100% | %で幅を指定する |
Demo
max-width: 100%; width: 4096px;
max-width: 100%; width: 2048px;
max-width: 100%; width: 480px;
max-width: 100%; width: 240px;
<div class="box box-1">max-width: 100%; width: 4096px;</div>
<div class="box box-2">max-width: 100%; width: 2048px;</div>
<div class="box box-3">max-width: 100%; width: 480px;</div>
<div class="box box-4">max-width: 100%; width: 240px;</div>
.box-1 {
width: 4096px;
max-width: 100%;
}
.box-2 {
width: 2048px;
max-width: 100%;
}
.box-3 {
width: 480px;
max-width: 100%;
}
.box-4 {
width: 240px;
max-width: 100%;
}
.box {
border-radius: 12px;
color: white;
font-family: monospace;
font-weight: 700;
display: flex;
padding: 8px 16px;
margin-bottom: 8px;
background: rgb(14, 165, 233);
white-space: nowrap;
}
.wrapper {
display: flex;
flex-direction: column;
}
概要
要素の最大幅を指定する。widthが最大幅を上回っていた場合、max-widthの値が要素の幅となる。
パターン
はみ出しを防止する
max-width: 100%;を指定することで、最大幅が親要素と同じ幅（100%）になるため、はみ出しを防止することができます。
画面幅が大きい場合はXXXpxで固定したいが、収まり切らない場合は100%に揃えたい、といった場合に用いることができます。
はみ出し防止にはflex レイアウトも有効です。
親要素が十分に大きいとき
親要素
子要素
width: 400px;親要素が小さいとき
親要素
子要素
width: 400px;親要素
子要素
width: 400px;
max-width: 100%;