幅・高さ
max-height
要素の最大高さを指定する
| value | description |
|---|---|
100px | pxで幅を指定する |
20rem | remで幅を指定する |
100% | %で幅を指定する |
Demo
200px より大きい高さは、200px に丸められていることがわかります。
height: 100%;
max-height: 200px
max-height: 200px
height: 300px;
max-height: 200px
max-height: 200px
height: 200px;
max-height: 200px
max-height: 200px
height: 100px;
max-height: 200px
max-height: 200px
<div class="wrapper">
<div class="box box-1">height: 100%;<br />max-height: 200px</div>
<div class="box box-2">height: 300px;<br />max-height: 200px</div>
<div class="box box-3">height: 200px;<br />max-height: 200px</div>
<div class="box box-4">height: 100px;<br />max-height: 200px</div>
</div>
.box-1 {
height: 100%;
max-height: 200px;
}
.box-2 {
height: 300px;
max-height: 200px;
}
.box-3 {
height: 200px;
max-height: 200px;
}
.box-4 {
height: 100px;
max-height: 200px;
}
.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;
flex: 1;
margin-right: 12px;
}
.wrapper {
display: flex;
align-items: flex-start;
height: 240px;
}
概要
要素の最大高さを指定します。heightが最大幅を上回っていた場合、max-heightの値が要素の幅となります。