CSSは、私が<code>resize</code> CSSプロパティを持つdiv要素のサイズを変更できるようにしたい最小幅

Question

のサイズを変更します。

クロム/サファリ私は初期サイズよりも小さくサイズを変更できません。

ウェブキットでサイズを小さくする方法はありますか？ （min-width/min-heightない作品を行う）

（2つのネストされたdivタグ付き）MDNからのライブexempleを参照してください https://developer.mozilla.org/samples/cssref/resize.html

Answer 1

私はhereを見つけたが、それは作業を行い、小さな回避策があります。ホバーで

、これは幅と高さとわずかな「フラッシュ」が発生しますようですね1px

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

に高さと幅を変更するには、劇的に変化している、しかし...それはハックです。

Answer 2

このライブサンプルを参考にして、初期サイズを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 3

私は時間のためにしようとしてきたが、私はちょうど私が幸せな設定Chromeの幅はMIN-ことであろうuserresizeを誘発することができれば、それは、ハックよりも良い仕事に作ることができませんあなたが移動した後に元の位置に戻すことができるように見えるので、あなたがそれを望むところに置くためにサイズをトリガーします。しかし、私は方法を見つけることはありません。

Answer 4

より良いソリューションを使用することです：アクティブな疑似クラス例えば：

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

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