div で CSS プロパティ「Overflow:scroll」を使用するときにテキストを完全にスクロールできるようにする方法

Question

私はプログラミングの初心者で、現在 HTML/CSS と JS を使用して簡単な 1 ページの Web サイトを作成しようとしています。 「general_container」という CSS クラスがあり、そこにテキストを記述します。これは、CSS では「div_text」としても定義されています (両方のコードは以下に示されています)。

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

    位置: 相対的;
}

テキストが含まれている div に比べて大きい場合に問題が発生します。上で定義したフォント サイズを使用すると、ネイティブ解像度 (2560x1440) ではテキストが非表示になり、スクロールバーからアクセスできます。ただし、下の画像に示すように、スクロールバーの上部にはテキストの先頭が表示されません (一般的なプレースホルダー テキストを使用しました)。

動的フォント サイズと div サイズの制約がこの動作の原因であると推測していますが、修正方法がわかりません。

スクロールバーからアクセスできないテキストを含む画像

div の制約とオーバーフロー プロパティを変更しようとしましたが、公式 Mozilla Webdev ガイドを読んだところによると、overflow-y:scroll (この場合は auto のデフォルトはスクロールです) を使用すると、希望通りの動作が実行されます。さらにテキストを追加する場合、max-height を大きくすると同じ問題が発生します。

Answer 1

align-items:center; ルールを削除します。

Answer 2

スクロールバーが上部から始まり、テキスト コンテンツ全体を確実に覆うようにするには、次の変更を加えます。 justify-content: center; を .general_container から削除します。 height:fit-content; と width:fit-content; を .general_container から削除します。 .general_container に特定の max-height を設定して、高さを制限します。

＃＃＃例＃＃＃ リーリー