max・box-sizing

CSS講座

widthとheightは望ましい寸法を指定し、min-width・max-widthなどはその範囲を制限します。border-boxではpaddingとborderを指定寸法に含めますが、高さを制限する場合はあふれた内容をどう読めるようにするかも決めます。

content-boxとborder-boxを同じ条件で比べる

幅300px、左右padding20px、枠2pxのカードを比べると、content-boxは内容300px・枠まで344px、border-boxは枠まで300px・内容256pxです。marginはどちらも指定幅の外です。領域の意味はボックスモデルで確認できます。

border-boxではpaddingを増やすと内容の幅が減り、折り返しが増えることがあります。paddingとborderだけで指定幅を超える場合、内容幅は負になれないため、実際のボックスが指定値を超えることもあります。MDNのbox-sizingで確認できます。

*, *::before, *::after { box-sizing: border-box; }

新しい文書で計算方法をそろえる共通規則です。擬似要素も含めています。既存のcontent-box前提のページへ一括適用すると配置が変わるため、影響範囲を確認します。完全な例では共通化したうえで.contentだけをcontent-boxへ戻して比較します。

可変幅と最小・最大の制限

.fluid { width: 100%; max-width: 32rem; min-height: 10rem; }

.limits { width: 100%; min-width: 180px; max-width: 320px; }

width:100%は包含ブロックを基準にし、max-widthは広い画面での上限です。ルート16pxなら32remは512pxです。min-widthは下限で、画面が狭くても維持するため横にはみ出す場合があります。

最小と最大が矛盾すると最小制約が勝ちます。min-width:360pxとmax-width:320pxでは360px未満へ縮めません。高さの最小・最大も同様です。FlexboxやGridでは自動最小サイズも調べ、必要なアイテムにmin-width:0を検討します。MDNのmin-widthとmin-heightが制約を説明しています。

内容に応じた高さと固定高を選ぶ

指定	内容が増えたとき	用途
height:auto	内容に合わせて高くなります。	一般の本文や説明カード
height:96px	枠は固定で内容があふれる場合があります。	内容量とあふれ方を管理できる場所
min-height:160px	最低160pxを確保して必要なら成長します。	最低限の高さと全文の両方が必要な場所
max-height:96px; overflow:auto	上限を超えると内部スクロールで読めます。	制限のある独立したパネル

高さを制限しても文章が自動的に消えるわけではありません。初期のoverflowなら外に見え、hiddenなら必要な情報まで切れる場合があります。スクロールさせるならキーボードやタッチ操作も確認します。overflowと長文の扱いと組み合わせて判断します。

パーセント高さが計算できる条件

.height-parent { height: 200px; }

.half { height: 50%; }

通常のブロックフローでは親が明示的に200pxなら子のheight:50%を100pxとして解決できます。親の高さが内容任せなら、同じ単純計算ではなく通常autoへ解決されます。min-heightだけでは同じ条件を用意したことになりません。

絶対配置、Flexbox、Gridではパーセントの解決条件が異なる場合があります。MDNのheightを確認し、「常に親の半分になる」とだけ覚えないようにします。

完全な例で寸法と内容を確認する

次をUTF-8のsizing.htmlへ保存します。二つの幅計算、寸法制限、同じ文章を使った高さ比較を含みます。

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Comparing width and height</title>

  <style>

    * { box-sizing: border-box; }

    body { margin: 16px; font: 16px/1.6 sans-serif; color: #333; }

    .compare { width: 300px; padding: 20px; border: 2px solid #3d6b89;

      margin-block: 16px; background: #eef6fa; }

    .content { box-sizing: content-box; }

    .border { box-sizing: border-box; }

    .fluid { width: 100%; max-width: 32rem; min-height: 10rem;

      padding: 24px; border: 2px solid #3d6b89; }

    .limits { width: 100%; min-width: 180px; max-width: 320px;

      padding: 12px; border: 1px solid #777; margin-block: 16px; }

    .height-box { width: 100%; max-width: 300px; padding: 12px;

      border: 2px solid #b98022; margin-block-end: 16px; }

    .height-box p { margin: 0; }

    .fixed { height: 96px; margin-block-end: 120px; }

    .minimum { min-height: 160px; }

    .limited { max-height: 96px; overflow: auto; }

    .height-parent { height: 200px; max-width: 300px; background: #eee; }

    .half { height: 50%; background: #cbe8d7; }

  </style>

</head>

<body>

  <h1>Comparing element sizes</h1>

  <h2>Same width: 300px</h2>

  <div class="compare content">content-box：344px to border</div>

  <div class="compare border">border-box：300px to border</div>

  <h2>Fluid width with minimum and maximum limits</h2>

  <div class="fluid">The maximum width is 32rem and the minimum height is 10rem. Try adding more sentences.</div>

  <div class="limits">The width is at least 180px and at most 320px.</div>

  <h2>fixed height 96px</h2><div class="height-box fixed"><p>The garden notice may grow as details about opening hours and preparation are added. A fixed height can make this text overflow the box. Check that readers can reach the last sentence.</p></div>

  <h2>Height that fits the content</h2><div class="height-box"><p>The garden notice may grow as details about opening hours and preparation are added. A fixed height can make this text overflow the box. Check that readers can reach the last sentence.</p></div>

  <h2>Minimum height: 160px</h2><div class="height-box minimum"><p>The garden notice may grow as details about opening hours and preparation are added. A fixed height can make this text overflow the box. Check that readers can reach the last sentence.</p></div>

  <h2>Maximum height: 96px, with scrolling</h2><div class="height-box limited" tabindex="0" role="region" aria-label="Maximum Height Comparison"><p>The garden notice may grow as details about opening hours and preparation are added. A fixed height can make this text overflow the box. Check that readers can reach the last sentence.</p></div>

  <h2>200px height of 50% of parent</h2><div class="height-parent"><div class="half">Height: 100px</div></div>

</body>

</html>

広い窓で.contentが344px、.borderが300pxか確認します。paddingを30pxにすると前者は364px、後者の外幅は300pxのままです。元へ戻します。
.fluidが窓に合わせて縮み、ルート16pxの広い画面では512pxを上限とするか確認します。
.limitsのmin-widthだけを360pxにし、max-width:320pxより大きくなることを見て180pxへ戻します。
高さ比較の四枠へ同じ文を追加します。固定高はあふれ、autoとmin-heightは伸び、max-heightは内部スクロールで読めることを確認します。
親のheight:200pxを外し、子の50%が100pxのままではなくなることを見ます。指定を戻して100pxになることを再確認します。

文字サイズや倍率を上げ、固定高で欠けや重なりがないかも見ます。100%なのに横へはみ出す場合はbox-sizing、左右margin、大きいmin-width、長い文字列の順に調べます。ツールの内容幅と枠までの幅を混同しないでください。

CSS講座