Css thay đổi kích thước min-width

Question

Tôi muốn thực hiện một thay đổi kích thước div với tài sản resize css:

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

tôi có thể tự do thay đổi kích thước với firefox.

với chrome/safari Tôi không thể thay đổi kích thước kích thước nhỏ hơn kích thước ban đầu.

là cách để cho phép thay đổi kích thước nhỏ hơn với webkit? (min-width/min-height làm không hoạt động)

thấy dụ trực tiếp từ MDN (với 2 divs lồng nhau) https://developer.mozilla.org/samples/cssref/resize.html

Answer 1

Có một workaround nhỏ mà tôi tìm thấy here, nhưng nó làm việc.

On di chuột, thay đổi chiều cao và chiều rộng để 1px

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

Có vẻ như điều này sẽ gây ra một "flash" nhẹ như chiều rộng và chiều cao đang thay đổi một cách đáng kể, nhưng ... nó là một hack.

Answer 2

Sử dụng ví dụ trực tiếp làm tham chiếu, tôi có thể đặt kích thước ban đầu bằng chiều rộng và chiều cao của div và chiều cao tối thiểu và chiều rộng tối thiểu là kích thước tối thiểu cho phép trong 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 3

Tôi đã cố gắng trong nhiều giờ nhưng không thể làm cho nó hoạt động tốt hơn so với hack, nếu tôi chỉ có thể kích hoạt một userresize tôi sẽ chiều rộng hạnh phúc thiết lập chrome để min- chiều rộng sau đó kích hoạt thay đổi kích thước để đặt nó ở nơi tôi muốn, vì có vẻ như bạn có thể di chuyển nó trở lại vị trí ban đầu sau khi di chuyển. Nhưng tôi không tìm ra cách.

Answer 4

Better giải pháp là sử dụng: lớp hoạt động giả ví dụ:

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

Ví dụ: http://jsfiddle.net/kronenbear/v4Lq5o09/1/