我有一個容器div，它的內容可以垂直增長。我使用overflow-y: auto容器使我的頁面看起來不錯。但是當內容的高度小于容器的高度時，我需要將所有內容放在中心。所以我使用 flexbox 來做到這一點。但問題是我無法完全滾動查看內容的頂部。
這是有問題的代碼的一個簡單示例：
<html lang="en">
<head>
<style>
.container {
width: 20rem;
height: 20rem;
background-color: red;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
overflow-y: auto;
}
.child {
width: 10rem;
height: 40rem;
background-color: blue;
flex-shrink: 0;
}
.top {
width: 1rem;
height: 1rem;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="child">
<div class="top"></div>
</div>
</div>
</body>
</html>
uj5u.com熱心網友回復：
此問題的解決方案之一是使用 flex-container 中元素的相反順序，即在您的情況下，使用flex-direction: column-reverse代替flex-direction: column.
下面的示例#1：
.container {
width: 20rem;
height: 20rem;
background-color: red;
display: flex;
justify-content: center;
flex-direction: column-reverse;
align-items: center;
overflow-y: auto;
}
.child {
width: 10rem;
min-height: 0;
height: 40rem;
background-color: blue;
flex-shrink: 0;
max-height: 150%;
}
.top {
width: 1rem;
height: 1rem;
background-color: green;
}<div class="container">
<div class="child">
<div class="top">test</div>
</div>
</div>第二種方案是考慮使用居中對齊，也可以使用justify-content: space-between偽元素::after和::before.
下面的示例#2：
.container {
width: 20rem;
height: 20rem;
background-color: red;
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
overflow-y: auto;
}
.container::before,
.container::after {
content: '';
}
.child {
width: 10rem;
min-height: 0;
height: 40rem;
background-color: blue;
flex-shrink: 0;
max-height: 150%;
}
.top {
width: 1rem;
height: 1rem;
background-color: green;
}<div class="container">
<div class="child">
<div class="top">test222</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/418618.html
標籤：