min-width tests

by jack gold

HTML

<div class="container">
    
<div class="max-content">
    <img src="http://placehold.it/200x200" />
    <p>Lorem ipsum yo momma sdfg dfgs fds  gsd sdfgs fgsdg sdfsdf gdsf</p>
</div>

<div class="min-content">
    <img src="http://placehold.it/200x200" />
    <p>Lorem ipsum yo momma sdfg dfgs fds  gsd sdfgs fgsdg sdfsdf gdsf</p>
</div>

<div class="fill-available">
    <img src="http://placehold.it/200x200" />
    <p>Lorem ipsum yo momma sdfg dfgs fds  gsd sdfgs fgsdg sdfsdf gdsf</p>
</div>

<div class="fit-content">
    <img src="http://placehold.it/200x200" />
   <p>Lorem ipsum yo momma sdfg dfgs fds  gsd sdfgs fgsdg sdfsdf gdsf</p>
</div>
    
</div>

SCSS

$min-widths: max-content, min-content, fill-available, fit-content;


* { box-sizing: border-box; }
.container { width: 600px; }

@each $mw in $min-widths {
    
    .#{$mw} { 
        position: relative;
        display: inline-block;
        min-width: $mw; 
        background: #eee;
        margin-bottom: 5px;
        border: 2px solid blue;
        
        &:after { 
                content: quote(#{$mw}); 
                position: absolute;
                top: 10px;
                z-index: 2;
            }
    }
}