locked
Horizontal scrolling layout using flexbox and columns

    Question

  • Hey,

    I'm currently trying to get a dynamic width horizontal scrolling layout working with CSS/HTML.

    If you look at the right Image below you will see what it is supposed to look like in the end, except I have no control over the length of the 'About' section (which is only text).

    All other sections I will have control over the width of the elements. 

    Now my actual problem is when I use a flexbox to house all of the sections (in the image Preview, About, Reviews etc.)
    and a column layout specified with the CSS3 columns property (using column-width) for the About section, the text of the columns overflows into other sections, because the div containg the columns does not expand in width.

    Here is some HTML with the about section and the corresponding CSS:

    <div class="detailContent"> 
    <div id="aboutDetails" class="detailColumn">
                        <header>
                            <h2 id="aboutDetailsTitle" class="column-title"></h2>
                            <h4 id="aboutDetailsSubtitle" class="column-subtitle"></h4>
                        </header>
                        <div class="item-content"></div>                                                    
                    </div>
    </div>


    .detailPage .content .detailContent {
        height: calc(100% - 50px);
        margin-top: 5px;
        margin-left: 120px;
        display: -ms-flexbox;
        -ms-flex-flow: row;
        -ms-flex-align: start;
    }
    
    .detailPage .content .detailColumn { 
        height: 100%;
        margin-right: 80px;
    }
    
    .item-content {
        height: calc(100% - 50px);        
        column-fill: auto;
        column-width: 333px;
        column-gap: 40px;
    }

    If anyone has a solution or perhaps a way to solve this another way, I would greatly appreciate it!

    Thanks for any help,

    Censored

    Thursday, June 14, 2012 8:24 PM