css - Shennanigans while resizing absolute positioned div on right side

Question

Fiddle: http://jsfiddle.net/scottbeeson/TU6Zw/

HTML:

<div id="itemMap" class="shadow">
    <div class="mapHeader">Open Items</div>
    <div class="mapItem">Test1</div>
    <div class="mapItem">Test2</div>
    <div class="mapItem">Test3</div>
</div>

CSS:

#itemMap {
    position: absolute;
    right: 0px;
    top: 0px;
    bottom: 0px;
    width: 230px;
    background-color: #f9f3b7;
    border: 1px solid cornflowerblue;
    font-size: .8em;
    z-index: 10;
}

Javascript:

$('#itemMap').resizable({
    handles: 'w',
    minWidth: 180
});

Answer 1

它只需要一个包装器就可以在 Chrome 中工作。见http://jsfiddle.net/gUzCU/

HTML

<div id="wrap">
    <div id="itemMap" class="shadow">
        <div class="mapHeader">Open Items</div>
        <div class="mapItem">Test1</div>
        <div class="mapItem">Test2</div>
        <div class="mapItem">Test3</div>
    </div>
</div>

CSS

#wrap {
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
width: 230px;
}

#itemMap {
position: absolute;
top: 0px;
bottom: 0px;
width: 230px;
background-color: #f9f3b7;
border: 1px solid cornflowerblue;
font-size: .8em;
z-index: 10;
}