CodePen

HTML

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

CSS

            
              //========================================
// 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%;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................