Flexbox nested

by bitcracker

HTML

<div class="flex-container">
    <button class="flex-item-auto">View All</button>
    <div class="flex-item-fill flex-container">
        <div class="flex-item-auto">Prev</div>
        <div class="middle flex-item-fill">
            <div class="big"></div>
        </div>
        <div class="flex-item-auto">Next</div>      
    </div>
</div>

CSS

.flex-container
{
   display: flex;
}

.flex-item-auto
{
     flex: 0 0 auto;  /* grow shrink basis */
}

.flex-item-fill
{
    flex: 1 1 auto;  
}

.middle
{
    overflow-x: scroll; 
}


.big
{
    width: 1000px;
    height: 20px;
    background-color: green;
}