Flexbox wrapping issue ( appears to work in firefox)

HTML & CSS
1

Hi,

New to flex-box and having some issues.

I have one box which I want to take up the full width ( contains a slide-show ). The next two boxes should wrap underneath one taking 2/3 and the other 1/3 of the overall width.

In Chrome and IE11 once the browser window’s width is dragged beyond the body’s max-width of 1200px the flex-box goes belly-up.

The first item ‘slider’ proceeds to fill the entire box forcing the text content of the other two items outside to the right of the box. It seems to function as intended in firefox.

Obviously it’s my ignorance at issue here. If anyone can point me in the right direction, would be much appreciated.

Cheers

RLM

A simplified version below.

<!DOCTYPE html>
<html lang='en'>
<head></head>
<style>
body {
    max-width: 1200px;
    margin: 0 auto;
}

main {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
}

#slider {
    -webkit-flex: 1 auto;
        -ms-flex: 1 auto;
            flex: 1 auto;
    background-color: cyan;
}

#slider div{
    width: 1200px;
    height: 200px;
    background-color: gray;
}

#mainInfo {
    -webkit-flex: 2;
        -ms-flex: 2;
            flex: 2;
    background-color: orange;
}

aside#sideBar {
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
    background-color: green;
}
</style>
<body>
    <main role='main'>
        <div id='slider'>
            <div></div><!-- Slider goes here -->
        </div>
        <div id='mainInfo'>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
        <aside id='sideBar' role='complementary'>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </aside>
    </main>
</body>
</html>
2

Trial and error, the way I found to fix this is to set the items to percentages instead.

item 1 flex: 1 100%;

item 2 flex: 1 66.66%;

item 3 flex: 1 33.33%;

Sticking an outline on 2 and 3 prior to this showed their widths being squashed to 0.

I’m not convinced this is the correct way to work though.

main {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}

#slider {
    flex: 1 100%;
    background-color: cyan;
}

#slider div{
    max-width: 1200px;
    height: 200px;
    background: gray;
}

#mainInfo {
    flex: 1 66.66%;
    background-color: orange;
}

aside#sideBar {
    flex: 1 33.33%;
    background-color: green;
}
3

No offense, but why are you using flexbox for this?

4

Possibly out of ignorance Ryan.

I liked the idea of less mark-up and letting the browser do the work. I’m using it in the main section of my homepage.

Testing it so far it seems to be working fine.

I’m not a web-developer by trade, just going by various reading material. Am I to take it that it’s a foolhardy endeavor?

Cheers

RLM

5

It’s not foolhardy, but do you know your target audience? Flexbox doesn’t have universal support yet so you might not want to go down that route. Depends on your audience whether this is viable.

6

Yes, I think that’s what you have to do. I haven’t played with flexbox enough yet but it seems that content stretches the element even though one is supposed to be twice as long as the other. Chris’s 3 column demo here suffers from the same problem and although it looks like its working it fails once content is added into the two side columns and then they all form 3 rows.

7

It’s an important point you make and thanks for the link.

I think I’m ok on that front. It’s basically a fan-site with a few products to purchase. Working on mobiles is probably a key requirement.

Looking at the site in ie9, I lose the columns, but at a stretch it does gracefully degrade.

Certainly a learning exercise.

Thanks

8

Yes, I think that’s what you have to do. I haven’t played with flexbox enough yet but it seems that content stretches the element even though one is supposed to be twice as long as the other. Chris’s 3 column demo here suffers from the same problem and although it looks like its working it fails once content is added into the two side columns and then they all form 3 rows.

Well that’s somewhat re-assuring. Thanks for the feedback.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.