CSS3 : Flex display and overflow

Question

I'm having trouble using CSS3 flex display and overflow. I'd like a box to be "y-scrollable" if contents overflow on y-axis and "x-overflowed" if content overflows on x-axis.

I found this codepen illustrating how to set the box y-scrollable and I forked this one to illustrate my problem. As you can see (using Chrome), a x-scrollbar is added even if overflow-x is set to visible. I hoped content would overflow upon the y-scrollbar and be visible without x-scrollbar...

Any solution ?

The base HTML code is

    <ul>
        <li><div>Item</div></li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ul>

The base CSS code is

ul {
  flex: 1;  
  min-height: 0;
  overflow: auto;
}

And, to make trouble, replace by

ul {
  flex: 1;  
  min-height: 0;
  overflow-x: visible ;
  overflow-y: auto;

}

div{
    background-color : red ;
    width : 150% ;
}

For make it really revealant, add

ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background: hsl(200,100%,90%);
}

li { padding: 20px; }

li:nth-child(odd) { background: hsl(200,100%,85%); }

header, footer { padding: 20px; background: hsl(0,0%,70%); }

body {
    display: flex;

    /* doesn't work without prefix */
    -webkit-flex-flow: column; 
    flex-flow: column;

    height: 100%;
    box-sizing: border-box;
    padding: 20px;
    background: hsl(0,0%,80%);
}

html { height: 100%; }

Answer 1

I could be reading this wrong, but if you're not wanting there to be a horizontal scroll bar, then you can set overflow-x: hidden; and it should be okay.