so-33291290

stackoverflow answer to question: 33291290

by Rene van der Lende

HTML

<div class="flex--box">
    <div class="flex--fluid" amber>
        <div class="flex--item">some text</div>
        <div class="flex--item">some text</div>
        <div class="flex--item">some text</div>
        <div class="flex--item">some text</div>
        <div class="flex--item">some text</div>
    </div>
    <div class="flex--fixed" bluegrey>mm</div>
</div>
<!-- Uncomment to show 2 more boxes
<div class="flex--box">
    <div class="flex--fluid" amber>
        <div class="flex--item">some text</div>
        <div class="flex--item">some text</div>
        <div class="flex--item">some text</div>
        <div class="flex--item">some text</div>
        <div class="flex--item">some text</div>
    </div>
    <div class="flex--fixed" bluegrey>mm</div>
</div>
<div class="flex--box">
    <div class="flex--fluid" amber>
        <div class="flex--item">some text</div>
        <div class="flex--item">some text</div>
        <div class="flex--item">some text</div>
        <div class="flex--item">some text</div>
        <div class="flex--item">some text</div>
    </div>
    <div class="flex--fixed" bluegrey>mm</div>
-->
</div>

CSS

html, body              { box-sizing: border-box; width: 100%; height: 100%; margin: 0; padding: 0 }
body                    { max-width: 100%; background-color: #fafafa; color: rgba(0,0,0,0.87); cursor: default }
*, *:before, *:after    { box-sizing: inherit }

.flex--box {
    display: flex;
    flex-flow: row wrap;

    padding: 10px 10px;
    width: 100%;
    font-size: 0.8em;
    font-weight: normal;
}

.flex--fluid {
    flex: 1;            /* => 1 1 auto (grow shrink fluid) */

    padding: 5px;
}
.flex--fixed {
    flex: 0 0;          /* => 0 0 auto (no-grow no-shrink auto) */

    min-width: 240px;   /* min-width, but fixed by 0 0 */
    height: 480px;
}

.flex--item  { 
    background-color: #f7f9fb;
    border: 1px solid #e1dacd;
    margin-bottom: 0.625em;
}

/* MOBILE */
@media all and (max-width: 360px) {
    .flex--fluid, .flex--fixed {
        flex: 1 1 auto; /* will grow beyond min-width, remove to see the difference on browser resize */
    }
}

[amber]     { background-color: #ffc107; color: rgba(  0,  0,  0,.87) }
[bluegrey]  { background-color: #607d8b; color: rgba(255,255,255,.87) }