div "style=resize:both" can not shrink in chrome (but it works in firefox)

Question

I have the following div:

<div style='overflow:hidden;resize:both;border:1px solid orange;'>
   <div style='background-color:#aaa;width:400px;height:300px;'>
   </div>
</div>

and you can see it here: http://jsfiddle.net/4w7zd/

if you run it in firefox you can resize the main div. (make it bigger or smaller) however if you run it in chrome you can only resize so to make it bigger (wider and taller)

Can somebody tell me how to work-around it so that I can make the main div as small as I wish (like with firefox) ?

Many thanks

Answer 1

I did some testing and it seems the content makes it impossible to resize down in chrome. I've updated your case to this

<div style='overflow:auto;resize:both;border:1px solid orange; min-height: 10px;'>
    <div style='background-color:#eee;width:400px;max-height:300px; height:100%;'>
    </div>
</div>

And it seems to work now: http://jsfiddle.net/4w7zd/7/

Not sure if this is an option for you, but it might point you in the right direction.

Answer 2

In chrome the minimum width when using resize is based on the content of it. This way works for me in Google Chrome: http://jqueryui.com/resizable/

Embed jquery libraries:

  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

Javascript:

<script>
  $(function() {
    $( ".resizable" ).resizable();
  });
</script>

HTML:

<div class="resizable" class="ui-widget-content">
  <h3 class="ui-widget-header">Resizable</h3>
</div>