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 remaining items to the right side, which will only be shown when I scroll.

Here is an image of what I am trying to do:

I tried setting the first item to 100% width, but it's still fitted just like other items.

Here is my CSS code:

    body
    {
        margin: 0;
        padding: 0;
        background-color: rgb(242, 242, 242);

    }
    .flex-container
    {
        display: -webkit-box;      
        display: -moz-box;         
        display: -ms-flexbox;     
        display: -webkit-flex;     
        display: flex;    

        flex-flow:row;  
        height:100%;
        position:absolute;
        width:100%;


        /*flex-wrap:wrap;*/
    }
    .box
    {
        padding: 20px;
        color:white;
        font-size:22px;
        background-color: crimson;
        border:1px solid white;
        flex:1;
        -webkit-flex:1;
        text-align:center;
    min-width:200px;



    }
    .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:10;
        -webkit-flex:10;

    }

    .flex1:hover
    {
            flex:4;
        -webkit-flex:4; 
    }

And my HTML code:

<div class="flex-container">        
    <div class="box splash">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
</div>

Answer 1

No Javascript ! Pure css

.container {
        width: 50%;
        margin: 0 auto;
        background:#ddd;
    }
    
   .l_info li {
    display: flex;
    display: -webkit-box;
    -webkit-box-align: start;
    align-items: flex-start;
    -webkit-box-align: center;
    align-items: center;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: .5rem;
    padding: .35rem .8rem;
    margin: .5rem;
    -webkit-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2));
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2));
    -webkit-transition: none;
    flex: none;
    max-width: unset;
    -webkit-box-flex: unset;
    -ms-flex: unset;
    opacity: unset;
} 
  
  .l_info {
    margin-bottom: 0;
    float: none;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: stretch;
    align-items: stretch;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 5px;
    -webkit-overflow-scrolling: touch;
}

<div class="container"> 
<div class="l_info"> 

<div class="info_li">Monday</div>
<div class="info_li">Tuesday</div>
<div class="info_li">Wednesday</div>
<div class="info_li">Thursday</div>
<div class="info_li">Friday</div>
<div class="info_li">saturday </div>
<div class="info_li">Sunday</div>
</div>
</div>

Answer 2

You can set the position of the Parent or Container to be Relative and the child inside them to be absolute.

    .Parent{
    display: flex;
    // and use any flexbox property
    width: 100%;
    height: 100%
    

    position: relative; // important point
    overflow: auto;
    }
    
    .Child{
    position: absolute; // important point
    }

Answer 3

I think I got a better way - especially when you're creating a horizontal scrolling carousel:

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  overflow-x: auto;
}

.item {
/* how you style this doesn't really matter - depends on your requirements -
   but essentially you want the items to span full width, and that's the 
   default (every flex container item has flex-grow set to 1)
*/
}

Take note here: I changed the direction to column so that flex-wrap now wraps horizontally. Also, you can change overflow-x to hidden if you don't want the scrollbar to show - but don't omit the overflow-x property since that means it will be the outter parent to now overflow (something I wouldn't find desirable)

The JS can then kick in.

Cheers

Answer 4

you just set all flex properties to parent div plus also add "overflow:auto" and in child div of parent set "flex-shrink : 0"----All will be setsee code example in image

Answer 5

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/