Flexbox | auto | stretch to fill | auto |

Auto

by jonnyc

HTML

<div>
    <ul>
        <li>
            <div class="host">
                <div class="element left">Kinda wide somewhat</div>
                <div class="element middle">
                    <div class="header">Some thing:</div>
                    <div class="details"> <span>Duration:</span>
 <span>18h</span>
 <span>Location:</span>
 <span class="caption">asdlk jsadlg jadflgj sldfkgj sdfl sdfkljgh klsdjg sdklghsdkfjgh hasd fdsa fas fsadf asdfasfasd sjka l;safgj logj l;sdfkjgl; sdkjg l;sdfjg l;sdfjg l;sdfg l;sdfg lsdfjkg l;sdfgj sdfl;jg eotjuweoparg op </span>

                    </div>
                </div>
                <div class="element right">Some width</div>
            </div>
        </li>
        <li>
            <div class="host">
                <div class="element left">Kinda wide somewhat</div>
                <div class="element middle">
                    <div class="header">Some thing:</div>
                    <div class="details"> <span>Duration:</span>
 <span>18h</span>
 <span>Location:</span>
 <span class="caption">asdlk jsadlg jadflgj sldfkgj sdfl sdfkljgh klsdjg sdklghsdkfjgh hasd fdsa fas fsadf asdfasfasd sjka l;safgj logj l;sdfkjgl; sdkjg l;sdfjg l;sdfjg l;sdfg l;sdfg lsdfjkg l;sdfgj sdfl;jg eotjuweoparg op </span>

                    </div>
                </div>
                <div class="element right">Some width</div>
            </div>
        </li>
    </ul>
</div>

CSS

.host {
    width:100%;
    ;
    height:60px;
    background:lightblue;
    border:1px solid black;
    display:flex;
}
ul {
    list-style-type:none;
    margin:0;
    padding:0;
}
li {
    margin:5px;
}
.element {
    display:block;
    border:1px solid black;
    flex-grow:1;
    overflow:hidden;
    text-overflow:ellipsis;
}
.header {
    font-weight:bold;
    font-size:24px;
}
.caption {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.details {
    display:flex;
    flex-direction: now;
    background:#FFCC99;
}
.left {
    background:#FFFFCC;
    flex-shrink:0;
    flex-grow:0;
}
.middle {
    background:#FF99FF;
}
.right {
    flex-shrink:0;
    flex-grow:0;
    background:#99FF66;
}