<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>