要素で align-items center と overflow auto を使用した後、一部のコンテンツが完全に表示されない

align-items center 属性を使用してコンテンツを中央に配置すると、画面が小さいため、コンテンツの一部がブロックされてしまいます。

overflow-y auto プロパティをボックスに追加します。

しかし、画面を縮小すると、コンテンツの上部が表示されなくなることがわかります。

<style>
  .box {
    height: 100vh;
    display: flex;
    align-items: center;
    overflow-y: auto;
  }

  .content {
    height: 600px;
  }
</style>
<body>
  <div class="box">
    <div class="content"></div>
  </div>
</body>

これは、要素が交差軸の中心にあるためです。交差軸上の要素の高さがそのコンテナよりも高い場合、オーバーフロー距離は両方向で同じになります。

参照文書：

align-items - CSS (カスケードスタイルシート) | MDN

以下に 2 つの解決策を示します。

1. ボックスの層をネストする

<style>
  .container {
    height: 100vh;
    display: flex;
    align-items: center;
    overflow-y: auto;
  }
  .box {
    height: 100%;
  }

  .content {
    height: 600px;
  }
</style>
<body>
  <div class="container">
    <div class="box">
      <div class="content"></div>
    </div>
  </div>
</body>

2. 表示フレックスをグリッド表示に変更します

<style>
  .box {
    height: 100vh;
    display: grid;
    align-items: center;
    overflow-y: auto;
  }

  .content {
    height: 600px;
  }
</style>
<body>
  <div class="box">
    <div class="content"></div>
  </div>
</body>

========================= ここにくだらないことを書いてください、読まないでください

csdnは記事の質をよく知っているふりをしているから

書く量が少ないと質の低い記事になります、押し上げられません、とても面白いです

csdnの新たに追加された品質検出機能、実質6「yyds」

この問題に遭遇した場合、私の回答で問題は 100% 解決できると信じています。私の記事の質が高くないと言いますか?

記事にくだらないことをたくさん書いてほしいですか？

要素で align-items center と overflow auto を使用した後、一部のコンテンツが完全に表示されない

以下に 2 つの解決策を示します。

1. ボックスの層をネストする

2. 表示フレックスをグリッド表示に変更します

おすすめ