How to set a Div scrollable horizontally but vertically fixed inside another Div

Question

ABI have a div container div and inside this I have another two divs which are very long than the container div so that horizontal scroll is applied to container. Also when the bottom div exceeds the height of the container, container div should have a scroll bar for y axis. But when this scroll is scrolled only the bottom div should be scrolled while the top div is fixed on the top of the container. This is similar to fixed header table functionality. I can use Jquery but not a Jquery plugin.

<div id="containerWith-Axpx-Aypx">
            <div id="topDivWith-BxpxWidth-20pxHeight">

            </div>
            <div id="bottomDivWith-BxpxWidth-BypxHeight">

            </div>
        </div>

Axpx << Bxpx

Bypx >> Aypx

Any advice will be appreciated.

Answer 1

Well your problem doesn't seem to be clear enough but you can use the overflow-x:auto; with the div you want to scroll horizontally:

#bottomDivWith-BxpxWidth-BypxHeight{
    overflow-x:auto;
}