Css rozmiaru min-width

Question

Chcę, aby div zmienny rozmiar z własności resize CSS:

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

mogę dowolnie zmienić jego rozmiar z firefox.

z chrome/safari Nie mogę zmienić rozmiaru mniejszego niż rozmiar początkowy.

ich sposób pozwala zmniejszyć rozmiar mniejszy przy pomocy webkita? (min-width/min-height nie działa)

zobaczyć na żywo exemple z MDN (z 2 zagnieżdżone DIV) https://developer.mozilla.org/samples/cssref/resize.html

Answer 1

Istnieje małe obejście, które znalazłem here, ale to nie działa.

przy aktywowaniu, zmienić wysokość i szerokość do 1px

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

Wygląda to spowoduje nieznaczne „flash” jako szerokość i wysokość są dramatycznie się zmienia, ale ... to jest hack.

Answer 2

Korzystając z tego przykładu na żywo jako odniesienia, udało mi się ustawić początkowy rozmiar równy szerokości i wysokości elementu div, a minimalna wysokość i minimalna szerokość to minimalne wymiary dozwolone w 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

Próbowałem na wiele godzin, ale nie można go zmusić, aby lepiej działać niż hack, czy może po prostu wywołać userresize byłbym szczęśliwy szerokość ustawienie Chrome do min- szerokość następnie wyzwalaj rozmiar, aby umieścić go tam, gdzie chcę, ponieważ wydaje się, że możesz przenieść go z powrotem do pierwotnej pozycji po przeniesieniu. Ale nie wiem, jak to zrobić.

Answer 4

lepszym rozwiązaniem jest zastosowanie: Klasa aktywny pseudo przykład:

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

przykład: http://jsfiddle.net/kronenbear/v4Lq5o09/1/