Why doesn't overflow: hidden work in this case?

Question

In the bookmark_matrix in this fiddle

I'm trying to hide content outside of the 500 px width

by setting

overflow:hidden

I'm not getting the desired effect as it wraps to the next line instead.

The two examples I've seen show overflow working with vertical content, I'm not sure if this implies it does not work with horizontal content.

Please note that I do not want it to wrap. Perhaps that would have been a better title.

If you want a flexible height on the bookmark matrix to allow lots of different types to be displayed then you will need to specifiy widths on the inner elements that are much wider than the container with the overflow:hidden on it, otherwise they will just wrap. — Darren Crabb
– Darren Crabb, Commented Nov 19, 2013 at 17:51
It's because the inner elements if not having a specific width set will simply become the width of their parent element. Therefore wrapping anything within them. Setting a specific width stops that wrap and forces them beyond the width of their parent, making the overflow:hidden useful again. — Darren Crabb
– Darren Crabb, Commented Nov 19, 2013 at 17:59

Paul Roub · Accepted Answer · 2013-11-19 17:48:40Z

4

You have no height set, so the div's height expands as needed. There's no overflow.

You could do something like this:

#bookmark_matrix{
    border: 1px dotted #222222;
    padding: 5px;
    width: 500px;
    overflow: hidden;
    height: 1em;
}

answered Nov 19, 2013 at 17:48

Paul Roub

36.5k27 gold badges88 silver badges95 bronze badges

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

3 Comments

but I want to prevent horizontal wrapping, while keeping the my height large.

I want to be able to extend my rows with out them effecting the rows below them.

In that case, add white-space: nowrap; to the .bookmark_row styles