why css break of arrow using jQuery mobile?

Question

When I make a simple demo of pop up having 2 or 3 items my triangle arrow is visible on the bottom.

http://jsfiddle.net/TFX6p/8/

When I add more items and set height and overflow:auto; my triangle arrow does not display, why?

http://jsfiddle.net/TFX6p/12/

<div data-role="page" id="MainPage">
    <div data-role="popup" id="Mainnavpanel" data-theme="b" data-arrow="b">
        <ul data-role="listview">
            <li> <a href="#MainPageheader" data-rel="close" class="ui-btn">Close</a>

            </li>
            <li><a href="Page1.html" class="ui-btn" data-transition="none">Page1</a>

            </li>
            <li><a href="Page2.html" class="ui-btn" data-transition="none">Page2</a>

            </li>
            <li><a href="Page3.html" class="ui-btn" data-transition="none">Page3</a>

            </li>

               <li> <a href="#MainPageheader" data-rel="close" class="ui-btn">Close</a>

            </li>
            <li><a href="Page1.html" class="ui-btn" data-transition="none">Page1</a>

            </li>
            <li><a href="Page2.html" class="ui-btn" data-transition="none">Page2</a>

            </li>
            <li><a href="Page3.html" class="ui-btn" data-transition="none">Page3</a>

            </li>
        </ul>
    </div>
    <div data-role="header" id="MainPageheader" data-position="fixed" data-tap-toggle="false" data-fullscreen="false">
         <h1>Header</h1>

    </div>
    <div data-role="content">content</div>
     <a href="#Mainnavpanel"  data-rel="popup" data-role="button" >openpopup</a>
</div>

Answer 1

Scroll on ul element will not work, try to apply width-height on outer div#Mainnavpanel-popup like,

#Mainnavpanel-popup{
    width: 300px;
    height: 200px;
    overflow: auto;
}

Demo

Updated if it should be visible then apply css on class ui-listview like,

.ui-listview{
    width: 300px;
    height: 200px;
    overflow: auto;
}

Updated Demo