Html 分区；样式=调整大小：两个"；在chrome中不能收缩（但在firefox中可以）

我有以下部门：

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

你可以在这里看到：

如果你在firefox中运行它，你可以调整主div的大小 然而，如果你在chrome中运行它，你只能调整大小使它更大（更宽更高）

有人能告诉我如何解决这个问题，这样我就可以使主div尽可能小（比如firefox）

---

非常感谢

我做了一些测试，内容似乎无法在chrome中调整大小。我已经更新了你的案子

<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>

现在它似乎起作用了：

---

不确定这是否适合您，但它可能会为您指明正确的方向。

在chrome中，使用

调整大小时的最小宽度取决于它的内容。在谷歌Chrome中，这种方式对我很有效：

嵌入jquery库：

  <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>


$（函数（）{
$（“.resizable”）.resizable（）；
});

HTML:


可调整大小
这里有一个解决方法：

div {resize: both;}
div:active {
  width: 0;
  height: 0;
}

它适用于Chrome、Safari和Firefox。它可能对IE不起作用，但我还没有检查。
但是，这种解决方法的问题是，您无法与可调整大小的div中的元素交互

这可能不是resize属性导致的@TMB很公平。。。那么问题是。。。有解决办法吗？我试着把min width:0或min height:0放进去，但似乎不行，tricki成功地将width和height属性移到了父div中，你仍然只能在chrome中使其变得更宽更高。但您可以为宽度和高度设置较低的最小值。也许有一种方法可以设置一个正常的默认值。我会再玩一些。@TMB祝你好运，谢谢你…仍然无法水平调整大小。@PeterVR正如Pavlo所说：无法水平调整大小。此外，高度为10px，这是不正确的，我必须同意。我一直在玩它一些更多，似乎无法让它工作，因为它应该。我认为您必须按照@P1nGu1n的建议使用javascript。可能会更好，因为跨浏览器的支持似乎仍然非常多。谢谢，但是。。。我当然不能仅仅为此添加jquery和jquery ui。。。有点太多了……jQuery确实存在与作者在“约束调整大小区域”下的检查类似的问题
div {resize: both;}
div:active {
  width: 0;
  height: 0;
}