max-height

The max-height property in CSS is used to set the maximum height of a specified element. Authors may use any of the length values as long as they are a positive value. max-height overrides height, but min-height always overrides max-height.

.wrapper {
  height: 100%;     /* full height of the content box */
  max-height: 20em; /* requires an absolute value for height. */
}

.wrapper {
  height: 50px;
  max-height: 20px; /* Will be AT MOST 20px tall : overrides height */
}

.wrapper {
  min-height: 400px; /* overrides height and max-height */
  height: 200px;
  max-height: 300px;
}

<h1>Max-Height</h1>
<h3>Block Level Elements</h3>
<p class="max-height-px">Content in a paragraph : <code>height: 50px / max-height: 20px</code></p>

<p class="max-height-em">Content in a paragraph : <code>height: 100% / max-height: 8em</code></p>

<p class="max-height-percent">Content in a paragraph : <code>height: 100% / max-height: 50%</code></p>

<h3>Elements Nested</h3>
<div class="nesting example1">
  <p class="max-heightnested">Example#1 : Containing element : <code>height: 100px</code>.  Content in a paragraph : <code>max-height: 20%</code></p>
</div>

<div class="nesting example2">
  <p class="max-heightnested">Example#2 : Containing element : <code>height: 100%</code>.  Content in a paragraph : <code>max-height: auto</code></p>
</div>

<h3>Tables</h3>
<code>height: 100px; max-height: 800px;</code>
<table class="browser-support-table table-example1">
		<thead>
			<tr>
        <th>Height</th>
				<th class="chrome"><span>Chrome</span></th>
				<th class="safari"><span>Safari</span></th>
				<th class="firefox"><span>Firefox</span></th>
				<th class="opera"><span>Opera</span></th>
				<th class="ie"><span>IE</span></th>
				<th class="android"><span>Android</span></th>
				<th class="iOS"><span>iOS</span></th>
			</tr>
		</thead>
		<tbody>
			<tr>
        <td>100px</td>
				<td class="yep-nope">All</td>
				<td class="yep-nope">All</td>
				<td class="yep-nope">All</td>
				<td class="yep-nope">All</td>
				<td class="yep-nope">All</td>
				<td class="yep-nope">All</td>
				<td class="yep-nope">All</td>
			</tr>
		</tbody>
	</table>

<code>height: 100%; max-height: 100px;</code>
<table class="browser-support-table table-example2">
		<thead>
			<tr>
        <th>Height</th>
				<th class="chrome"><span>Chrome</span></th>
				<th class="safari"><span>Safari</span></th>
				<th class="firefox"><span>Firefox</span></th>
				<th class="opera"><span>Opera</span></th>
				<th class="ie"><span>IE</span></th>
				<th class="android"><span>Android</span></th>
				<th class="iOS"><span>iOS</span></th>
			</tr>
		</thead>
		<tbody>
			<tr>
        <td>100%</td>
				<td class="yep">All</td>
				<td class="yep">All</td>
				<td class="yep">All</td>
				<td class="yep">All</td>
				<td class="yep">All</td>
				<td class="yep">All</td>
				<td class="yep">All</td>
			</tr>
		</tbody>
	</table>

//========================================
// Globals
//========================================

html {
  background: #e78629;
}

p {
  background: #212121;
  color: #FFF;
}

.nesting {
  background: white;
}

table {
  float: left;
  margin-right: .5em;
  background: white;
}


//========================================
// Min-Height Demo
//========================================


// $Block Level Elements
// =========================================

p.max-height-px {
  height: 50px;
  max-height: 20px; // overrides height
}

p.max-height-em {
  height: 100%;
  max-height: 8em; // needs an absolute value for height specified
}

/**
* Two percentages will not produce a result
*/
p.max-height-percent {
  height: 100%;
  max-height: 50%;
}


// $Elements Nested
// =========================================

// Example#1
.nesting.example1 {
  height: 100px;
  .max-heightnested {
    max-height: 20%; /* works because height is an absolute length value */
  }
}

// Example#2
.nesting.example2 {
  height: 100%;
  .max-heightnested {
    height: auto;
  }
}


// $Tables
// =========================================

// Example Left
.table-example1 {
  max-height: 800px;
  height: 100px; // height overrides max-height
}

// Example Right
.table-example2 {
  max-height: 100px;
  height: 100%;
}

The percentage is calculated with respect to the height of the containing block. If the height of the containing block is not specified explicitly, the percentage value is treated as none. The max-height property will apply to all elements except non-replaced inline elements, table columns, and column groups (i.e. colgroup, col ).

Related Properties

• height
• min-height

Browser Support