Flex box with overflow

http://stackoverflow.com/q/31261951/4402222

by Ram Tobolski

HTML

<div id="TaskTimeBar">
    <div id='main-wrapper'>
        <div class="task-time-bar-content">
            <div id="time-cell">
                <div class='time-container'> <i class="fa fa-clock-o"></i>21:12</div>
            </div>
            <div id="active-task-bar-main-content">
                <div><i class="fa fa-link"></i>  <a href="/show?table=TASK&amp;key=28125">#28125</a>

                </div>
                <div><i class="fa fa-info"></i> This can be a long text...XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div>
                <div><i class="fa fa-user"></i>  <a href="/show?table=Customer&amp;key=1">Yo mama</a>

                </div>
            </div>
            <div id="active-task-bar-buttons">
                <div class="active-bar-button-wrapper">
                    <button>Stop</button>
                </div>
                <div class="active-bar-button-wrapper">
                    <button>Switch To #28192</button>
                </div>
            </div>
        </div>
        <!--task-time-bar-content-->
    </div>
    <!--main-wrapper-->
    <div class="active-task-bar-information">This is an information messageXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div>
</div>
<!--TaskTimeBar-->

CSS

html {
    box-sizing: border-box;
    font: 16px/1.5 Consolas;
}
body {
    width: 100%;
    min-width: 60em;
    height: auto;
}
*, *:before, *:after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
    border: 0;
}
#TaskTimeBar {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -moz-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -moz-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: stretch;
    -ms-flex-pack: stretch;
    -webkit-justify-content: stretch;
    -moz-justify-content: stretch;
    justify-content: stretch;
}
#main-wrapper {
    display: inline;
}
.task-time-bar-content {
    padding: 5px;
    display: inline;
    white-space: nowrap;
}
#time-cell {
    font-weight: bold;
    font-size: 22px;
    display: inline;
}
.time-container {
    display: inline;
}
.time-container i {
    padding-right: 5px;
}
#active-task-bar-main-content {
    padding: 0 10px;
    display: inline;
    white-space: nowrap;
}
#active-task-bar-main-content div {
    padding: 0 10px;
    display: inline;
    white-space: nowrap;
}
#active-task-bar-buttons {
    padding: 0 10px;
    display: inline;
}
.active-bar-button-wrapper {
    line-height: 28px;
    margin-right: 5px;
    display: inline;
}
.active-task-bar-information {
    background-color: #ffa500;
    color: #f3ebf8;
    border: thin solid #808080;
    border-top: none;
    text-align: center;
    display: inline;
}