CSS Flex – Replacing Inline-display with flex

[mckabue]

I have a layout created and layed-out well with inline-display. Because of the spaces between inline blocks, I want to use flex box, but I cant see to get it right…

Here is the demo of what I have done with inline-display and what I want to achieve with flex-box.

Stackoverflow Question

JSFiddle dEMO

.content-section {
        position: relative;
        width: 83%;
        height: 500px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        background-color: #444;



        .box {
            width: auto;
            height: 100%;
            margin-right: 10px;
            display: inline-block;

            .current {
                display: inline-block;
                height: 100%;

                &.small {
                    width: 200px;
                }

                &.medium {
                    width: 400px;
                }

                &.large {
                    width: 600px;
                }
            }

            .next {
                width: auto;
                height: 100%;
                display: inline-block;
            }

            .box-tool-bar {
                height: 19px;
                position: relative;
                display: table;
                width: 100%;
                background-color: #ffffff;
                border-bottom: 1px solid #333333;

                .controls {
                    display: table-cell;
                    float: right;

                    i {
                        font-size: 16px;
                        cursor: pointer;
                    }
                }

                .title {
                    display: table-cell;
                    float: left;
                }
            }

            .content {
                height: calc(100% - 20px);
                overflow-y: auto;
                overflow-x: hidden;
                white-space: normal;
                background-color: #ffffff;
                font-size: 15px;
                color: #333333;
                line-height: 24px;
                padding-top: 10px;
            }
            /*&:first-child {
        margin-left: 10px;
    }*/
            &:last-child {
                margin-right: 30%;
            }
        }
    }

[Author]

Posts