Enabling horizontal scroll in flexbox

Question

I am new to flexbox, and I am trying to make a horizontal scrolling website. The idea is to show the first item as 100% height and width, like covering the screen with the r

Answer 1

Flex items have "flex-shrink: 1" by default. If you want the first item to fill the container and force the others to overflow (as it sounds like you do), then you need to set "flex-shrink: 0" on it.

The best way to do this is via the "flex" shorthand, which you're already using to give it "flex: 10".

Just replace that with flex: 10 0 auto -- the '0' there gives it a flex-shrink of 0, which prevents it from shrinking below the width:100% that you've given it.

Perhaps better: just give it flex: none, since I don't think you're really getting any benefit from the "10" there, since there's no free space to distribute anyway, so the "10" is giving you 10 useless shares of nothing.

So that makes your 'splash' rule into this:

.splash {
    background-image: url(1.jpg);
    width:100%;
    background-size:cover;
    background-position:50% 50%;
    background-repeat: no-repeat;
    transition: all 0.6s ease;
    flex:none;
}

Here's a fiddle with this change (but otherwise using your provided CSS/HTML). This renders like your mock-up in Firefox Nightly and Chrome: http://jsfiddle.net/EVAXW/