div で CSS プロパティ「Overflow:scroll」を使用するときにテキストを完全にスクロールできるようにする方法
<p>私はプログラミングの初心者で、現在 HTML/CSS と JS を使用して簡単な 1 ページの Web サイトを作成しようとしています。 「general_container」という CSS クラスがあり、そこにテキストを記述します。これは、CSS では「div_text」としても定義されています (両方のコードは以下に示されています)。
<pre class="brush:php;toolbar:false;">.general_container{
マージン: min(1vw,1vh) min(1vw,1vh);
ディスプレイ: フレックス;
高さ: フィットコンテンツ;
幅: コンテンツに合わせて;
最大幅: 100%;
最大高さ: 80vh;
位置: 相対的;
パディング: min(1vw,1vh);
境界線の色: #232323;
ボーダースタイル: ソリッド;
ボーダー幅: 0.2rem;
境界半径: 1rem;
整列項目: 中央;
コンテンツの位置揃え:中央;
オーバーフロー-x: 非表示;
オーバーフロー-y: 自動;
}
.div_text {
フォントサイズ: calc(12px 1.5vw);
色: #F2F2F2;
位置: 相対的;
}</pre>
<p>テキストが含まれている div に比べて大きい場合に問題が発生します。上で定義したフォント サイズを使用すると、ネイティブ解像度 (2560x1440) ではテキストが非表示になり、スクロールバーからアクセスできます。ただし、下の画像に示すように、スクロールバーの上部にはテキストの先頭が表示されません (一般的なプレースホルダー テキストを使用しました)。 </p>
<p>動的フォント サイズと div サイズの制約がこの動作の原因であると推測していますが、修正方法がわかりません。 </p>
<p>スクロールバーからアクセスできないテキストを含む画像</p>
<p> div の制約とオーバーフロー プロパティを変更しようとしましたが、公式 Mozilla Webdev ガイドを読んだところによると、overflow-y:scroll (この場合は auto のデフォルトはスクロールです) を使用すると、希望通りの動作が実行されます。さらにテキストを追加する場合、max-height を大きくすると同じ問題が発生します。 </p>
