CSS Tutorial / CSS Width, Height, min/max Limits, and box-sizing

CSS width and height set preferred dimensions, while min-width, max-width, min-height, and max-height impose limits. With box-sizing: border-box, the declared dimensions include padding and borders, but a height limit still needs a deliberate overflow strategy.

Compare content-box and border-box

Give both cards width: 300px, 20px padding on each side, and 2px borders. With content-box, the content is 300px and the border-box is 344px. With border-box, the border-box is 300px and the content is 256px. Margin is outside the declared width in both cases. See The CSS Box Model: Content, Padding, Border, and Margin.

border-box keeps padding and borders inside the declared size. Increasing padding reduces available content width and can increase wrapping. If the padding and borders alone exceed the declared width, the content cannot become negative, so the actual box can exceed that width. See MDN: box sizing.

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

Common rules that can be used to unify calculation methods in new documents. We also included pseudo-elements to be calculated in the same way. If you apply it to existing pages in batches, the layout created based on the content-box may change, so check the required area first. The full example applies the common rules, but reassigns the content-box only to .content for comparison.

Set fluid widths and minimum or maximum limits

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

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

width: 100% is based on the width of the containing block, and max-width limits it from growing larger on wide screens. Under the condition that the root font size is 16px, 32rem is 512px. min-width is the lower limit on how small it can be. Even if the screen is narrower than 180px, maintaining the minimum width can cause horizontal overflow.

A minimum constraint wins when it conflicts with a maximum: min-width: 360px with max-width: 320px does not let the box shrink below 360px. The corresponding height constraints behave similarly. Flexbox and Grid automatic minimum sizes require their own checks; use min-width: 0 where appropriate. See MDN: min width, MDN: min height.

Compare automatic, fixed, and constrained heights

A height limit does not automatically remove overflowing text. The default overflow may display it outside the box; hidden may clip information the reader needs. When combining max-height with scrolling, also check keyboard access and mobile interaction. The full example leaves extra space after the boxes so you can observe the fixed-height failure. If a box does not shrink as expected, also review CSS Overflow, Long Text Wrapping, and Ellipsis.

Understand percentage height conditions

.height-parent { height: 200px; }

.half { height: 50%; }

In normal block flow, a parent with an explicit 200px height lets a child's height: 50% resolve to 100px. If the parent height depends on content, that simple calculation usually resolves as auto instead. A min-height alone does not supply the same condition. Absolute positioning, Flexbox, and Grid can have different percentage-resolution rules. See MDN: height.

Run the example and compare dimensions

Save the code below as UTF-8 in sizing.html. It includes two width calculations, a size limit, and a height comparison with the same statement.

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

1. Check the actual width of .content and .border in a wide window. They are 344px and 300px respectively. If you change only the padding of the content-box to 30px, it will be 364px, and the outer width of the border-box will be 300px even after the same change.
2. Reduce the window width to see if the .fluid shrinks with its parent. In a wide window with a root of 16px, the maximum is 512px. If I briefly change the min-width in .limits to 360px, it will be larger than the max-width of 320px. Revert it back to 180px.
3. Add the same statement to the four height comparison boxes. The fixed height should overflow out of bounds, auto and min-height should grow as needed, and the max-height panel should be readable with internal scrolling.
4. Remove height: 200px from parent. Check that the child's 50% height no longer stays at 100px, and restore the original declaration to make sure they are 100px again.
5. Increase your browser's font size or magnification ratio. Make sure that letters are not cut off or overlap at a fixed height, and practice the judgment of using auto for body text that does not require size restrictions.

width: 100%, but if it overflows horizontally, check box-sizing, left and right margins, large min-width, and long string in that order. Don't confuse the size of the content displayed in Developer Tools with the size of the border. After changing the value, revert back to the original declaration to maintain the comparison condition.