<p><strong>Sizing</strong></p>

<p>Easily make an element as wide or as tall (relative to its parent) with our width and height utilities.</p>

<p>Width and height utilities are generated from the <strong>$sizes</strong> Sass map in <strong>vars.scss</strong>. Includes support for <strong>25%</strong>, <strong>50%</strong>, <strong>75%</strong>, and <strong>100%</strong> by default. Modify those values as you need to generate different utilities here.</p>

<div class="mdl-example">
    <div class="container">
        <div class="w-25 p-1" style="background-color: #eee;">Width 25%</div>
        <div class="w-50 p-1" style="background-color: #eee;">Width 50%</div>
        <div class="w-75 p-1" style="background-color: #eee;">Width 75%</div>
        <div class="w-100 p-1" style="background-color: #eee;">Width 100%</div>
    </div>
<pre>
&lt;div class="w-25 p-1" style="background-color: #eee;">Width 25%&lt;/div>
&lt;div class="w-50 p-1" style="background-color: #eee;">Width 50%&lt;/div>
&lt;div class="w-75 p-1" style="background-color: #eee;">Width 75%&lt;/div>
&lt;div class="w-100 p-1" style="background-color: #eee;">Width 100%&lt;/div>
</pre>
</div>

<p></p>

<div class="mdl-example">
    <div class="container">
        <div style="height: 100px; background-color: rgba(255,0,0,0.1);">
            <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
            <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
            <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
            <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
        </div>
    </div>
<pre>
&lt;div style="height: 100px; background-color: rgba(255,0,0,0.1);">
    &lt;div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%&lt;/div>
    &lt;div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%&lt;/div>
    &lt;div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%&lt;/div>
    &lt;div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%&lt;/div>
&lt;/div>
</pre>
</div>

<p>You can also use <strong>max-width: 100%;</strong> and <strong>max-height: 100%;</strong> utilities as needed.</p>

<div class="mdl-example">
    <div class="container">
        <img class="mw-100" alt="Max-width = 100% [1000%x100]" style="height: 100px; width: 1000%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22815%22%20height%3D%22100%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20815%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164cc889977%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A41pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164cc889977%22%3E%3Crect%20width%3D%22815%22%20height%3D%22100%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22181.921875%22%20y%3D%2268.9%22%3EMax-width%20%3D%20100%25%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true">
    </div>
<pre>
&lt;img class="mw-100" src="..." alt="Max-width 100%">
</pre>
</div>

<p></p>

<div class="mdl-example">
    <div class="container">
        <div style="height: 100px; background-color: rgba(255,0,0,0.1);">
            <div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div>
        </div>
    </div>
<pre>
&lt;div style="height: 100px; background-color: rgba(255,0,0,0.1);">
    &lt;div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%&lt;/div>
&lt;/div>
</pre>
</div>

// stylelint-disable declaration-no-important

// Width and height

@each $prop, $abbrev in (width: w, height: h) {
  @each $size, $length in $sizes {
    .#{$abbrev}-#{$size} { #{$prop}: $length !important; }
  }
}

.mw-100 { max-width: 100% !important; }
.mh-100 { max-height: 100% !important; }

// Viewport additional helpers

.min-vw-100 { min-width: 100vw !important; }
.min-vh-100 { min-height: 100vh !important; }

.vw-100 { width: 100vw !important; }
.vh-100 { height: 100vh !important; }