another overflow-x: hidden vs overflow-y:visible issue

Question

I'm trying to build a tab overflow UI similar to what firefox does, using a combination of fixed width containers and a fluid width container in the middle that holds the tabs.

The tricky part is when there are too many tabs in the tab container. i've added overflow-x:hidden; white-space:nowrap to keep everything inside the container and on one line. The tabs have context menus within them, so i need to display those as well when i click on a tab. (the js has been omitted intentionally,as i'm just trying to get around this display issue which is css).

here's a fiddle that shows what i'm trying to accomplish. http://jsfiddle.net/Add9Y/3/.

If you remove the comments on the overflow in the css on lines 5 and 13, you'll be able to see the submenu below the first tab, but now the overflow runs over the controls on the right hand side.

Any idea how i can get these to line up without having to rely on javascript? Thanks!

Robert Messerle · Accepted Answer · 2014-03-15 00:22:04Z

2

Oddly enough, there was just an article on this exact issue:

http://css-tricks.com/popping-hidden-overflow/

Here is the updated JSFiddle with this solution applied:

http://jsfiddle.net/Add9Y/4/

Updated part of the CSS:

.list > div {
    display:inline-block;
    //overflow-y:visible;
    line-height:48px;
    padding:0 5px;
    border:1px solid #bada55;
    //position:relative;
}

This appeared to work when I tested it (via Chrome), but I did not test too extensively.

answered Mar 15, 2014 at 0:22

Robert Messerle

3,03217 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

another overflow-x: hidden vs overflow-y:visible issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related