2

I have a div (wrapper in red) with overflow-y: auto with a few items. Each item has a bootstrap dropdown menu (in green) which is positioned absolutely. I cannot seem to figure out why the menu does not extended outside the wrapper but instead creates a horizontal scroll for the parent wrapper div.

Removing overflow-y from the wrapper gets the desired effect (see wrapper2) but I loose the vertical scroll of the parent.

<style>
    .wrapper {
        position: relative;
        width: 200px;
        height: 300px;
        background: red;
        overflow-y: auto;
        overflow-x: auto;
    }

    .menu {
        position: absolute;
        background: green;
        width: 150px;
        height: 70px;
        right: -20px;
        z-index: 1;
    }

    .wrapper ul {
        list-style: none outside;
        padding-left: 0;
    }

    .wrapper li {
        background: blue;
        width: 100%;
        height: 50px;
        color: #fff;
        margin-bottom: 5px;
        position: relative;
    }

    .wrapper2 {
        position: relative;
        width: 200px;
        height: 300px;
        background: red;
    }

    .wrapper2 ul {
        list-style: none outside;
        padding-left: 0;
    }

    .wrapper2 li {
        background: blue;
        width: 100%;
        height: 50px;
        color: #fff;
        margin-bottom: 5px;
       position: relative;
    }
</style>
<div class="wrapper">
    <h4>
        A
    </h4>

    <ul>
        <li>
            <div class="menu">
                Menu goes here
            </div>


            1
        </li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>



</div>





<div class="wrapper2">

    <h4>
        B
    </h4>

    <ul>
        <li>
            <div class="menu">
                Menu goes here
            </div>


            1
        </li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>



</div>

FIDDLE

Neil
  • 2,802
  • 8
  • 34
  • 49
  • But in the second case it does overflow outside the parent, i.e. When I remove the vertical scroll of the wrapper https://jsfiddle.net/x3nk6j3e/3/ – Neil May 26 '17 at 08:43
  • there is no way in doing this. to keep scroll on Y scroll and scroll on X visible without using position fixed + position the menu with a little javascript . see here > https://stackoverflow.com/questions/5209545/css-overflow-yvisible-overflow-xscroll – Mihai T May 26 '17 at 08:55
  • Thanks. Link explains alot – Neil May 26 '17 at 09:24

1 Answers1

0

By default, the overflow value is visible. So in the second case it will show all content and there is no scroll bar.
In your case, you can not keep overflow-y: auto and overflow-x: visible at one element beacasue visible will set to auto when you put it together. See about it here

Duannx
  • 7,501
  • 1
  • 26
  • 59