Header
Test
如果垂直高度增加，如何使 div 向上而不是向下擴展？
我有一個有標題和一些內容的頁面。標頭是一個動態值，根據內容可以有很多不同的內容。當標題較長並且需要兩行或更多行時，就會出現此問題。由於我希望內容保持在相同的垂直和水平位置，因此如果標題較短，我希望較長標題的最後一行與第一行處於相同的垂直位置。
我希望我能讓別人理解我自己。 請嘗試透過新增第二個字來編輯標題，您就會明白我的意思。
我認為這個問題可以用 flex-box 來解決，但我不知道如何解決，我已經用 flex-end 等嘗試了很多不同的東西。
這是我的程式碼範例：
.main {
display: flex;
justify-content: center;
min-height: 200px;
border: 1px solid black;
}
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid red;
width: 200px;
height: 300px;
padding-top: 20px;
gap: 20px;
}
.header-div {
display: flex;
border: 1px solid blue;
align-items: center;
text-align: center;
max-width: 100px;
}
.header {
border: 1px solid green;
}
.content {
border: 1px solid green;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<div class="wrapper">
<div class="header-div">
<h1 className="header">Header</h1>
</div>
<div class="content">Test</div>
</div>
</div>
</body>
</html>
提前致謝！
編輯 這是一張製作不佳的圖像，它說明了我的目標。 左圖是標題佔據一行時的情況，第二張圖是標題佔據兩行時的情況：