CSS overflow-x hidden and overflow-y visible

You can do this with CSS like this:


<div class="wrapper">
    <div class="inner">


    width: 400px;
    height: 300px;
    max-width: 100%;
    overflow-x: hidden;

Now your .wrapper div will have overflow: visible; but your .inner div will never overflow because it has a maximum width of 100% of the wrapper div. Note that your wrapper must have an explicitly defined width.

Here is a working jsFiddle

Leave a Comment