3

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%; }
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
valoulol
  • 31
  • 4
  • Your question is well explained, it will be better if you also post your relevant code here, if the link dies in future, your question wont be useful for future visitors.. – Mr. Alien Jun 12 '14 at 16:39
  • Here it is ! Thanks ! – valoulol Jun 12 '14 at 16:56
  • I'll help you out to retag so that you get some views – Mr. Alien Jun 12 '14 at 16:59
  • This has nothing to do with flexbox. I'm pretty sure you can't have both visible and scroll/auto together (how is it supposed to look anyway?). – BoltClock Jun 12 '14 at 17:09
  • Thanks BoltClock♦ ! As you said, there is no link with flexbox. [This post](http://stackoverflow.com/questions/5209545/css-overflow-yvisible-overflow-xscroll) helped me resolving my problem ! Thanks' again ! – valoulol Jun 12 '14 at 17:58

1 Answers1

0

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.

Pixel Rubble
  • 1,104
  • 3
  • 14
  • 26