コンテンツが制限よりも小さい場合に消えるスクロールバーをHTMLに追加する方法

Question

拡張可能なウィジェットを持つフォームを作成しようとしています。問題は、ウィジェットが開いているときに、フォームがコンテンツボックスの制限を超えて拡張され、見た目が悪いことです。

overflow：scroll を使用しようとしましたが、2つのいスクロールバーが作成され、コンテンツがボックスよりも小さくても消えません。必要な垂直スクロールバーは1つだけです。

Visual Studioは、オーバーフローyがCSSで使用できないことも警告しました。

Answer 1

オーバーフローを auto に変更し、要素の高さや幅を定義します。

Answer 2

overflow-x および overflow-y は、CSS3提案の一部であり、4つのブラウザーの現在のすべてのバージョンで動作します。

私は通常：

overflow: auto;
overflow-x: auto;
overflow-y: auto;

理由は、コンテンツが一方向にオーバーフローするとすぐにブラウザーが overflow：auto を overflow：scroll （2つのugいスクロールバー）として扱うことがありますが、これらのブラウザーはすでにサポートしているためです優先される overflow-x および overflow-y 。

Answer 3

Swilliamsは、症状の治療方法について良い答えを出しました。しかし、根本的な原因についても考えてください。コンテンツボックスが固定サイズに制限されていない場合、スクロールバーなしで、任意のサイズのフォームに合わせて縮小および/または拡張できます。 Webページは設計上柔軟性があり、「修正」しようとします。その柔軟性は通常、この種の問題に突き当たります。