css - CSS调整最小宽度

Question

我想使用resizecss 属性使 div 可调整大小：

#foo{
  overflow: hidden;
  resize: both;
}

我可以用firefox自由调整它的大小。

使用 chrome/safari 我无法将其调整为小于初始大小。

他们是一种允许使用 webkit 调整大小的方法吗？（min-width/min-height不工作）

查看来自 MDN 的实时示例（带有 2 个嵌套 div） https://developer.mozilla.org/samples/cssref/resize.html

Answer 1

更好的解决方案是使用 :active 伪类，例如：

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

示例：http: //jsfiddle.net/kronenbear/v4Lq5o09/1/

Answer 2

我在这里找到了一个小的解决方法，但它确实有效。

悬停时，将高度和宽度更改为1px

#foo:hover{
    width: 1px;
    height: 1px;
}

听起来这会导致轻微的“闪光”，因为宽度和高度正在发生巨大变化，但是......这是一个黑客。

Answer 3

使用该示例作为参考，我能够将初始大小设置为等于 div 的宽度和高度，并将 min-height 和 min-width 设置为 Chrome 中允许的最小尺寸。

    #foo {
      resize: both;
      overflow: scroll;
      width: 300px;
      height: 300px;
      min-width: 50px;
      min-height: 70px;
    }
    div {
      background-color: #acacac;
      border: 1px solid #000;
    }

<div id="foo"></div>

Answer 4

我已经尝试了几个小时，但不能让它比黑客更好地工作，如果我可以触发 userresize 我很乐意将 chrome 的宽度设置为 min-width 然后触发调整大小以将其放在我想要的位置，因为它移动后似乎可以将其移回原始位置。但我不知道怎么做。