正如我在.panel类(它有一个postion: relative;(中将position:absolute;添加到我的h3中一样，一切都开始分崩离析。当我刷新时，我仍然得到一个空白页面，我试图从dev工具中检查我的元素，当我减少视口宽度时，它突然不知从哪里出现。我还注意到.panel的宽度现在是0，但如何呢？
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style-type: none;
text-decoration: none;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
display: flex;
max-width: 90vw;
}
.panel {
height: 80vh;
border-radius: 50px;
margin: 10px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: flex 0.8s ease-in;
flex: .5;
cursor: pointer;
position: relative;
}
.panel h3 {
position: absolute;
font-size: 1.5rem;
bottom: 20px;
left: 20px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Day-1 Expanding cards</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="container">
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1619994948937-ef1e758d46ca?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=890&q=80');">
<h3>Some Heading</h3>
</div>
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1621335819647-09d00a452430?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=668&q=80');">
<h3>Some Heading</h3>
</div>
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1615653051647-321e464edc86?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80');">
<h3>Some Heading</h3>
</div>
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1606170034762-cbe66ccabbf8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=750&q=80');">
<h3>Some Heading</h3>
</div>
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1568056308658-aa380181da25?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1037&q=80');">
<h3>Some Heading</h3>
</div>
</div>
</body>
</html>尝试将width添加到.panel类中，并使用实际值(而不是auto或%(。您有一个设置的高度，但单独的高度不会使元素占据页面上的任何宽度。
将.panel h3元素更改为position: absolute时出现此问题的原因是，正是这些h3元素之前赋予了.panel宽度。当它们被切换到absolute时，它们被从文档流中删除，并且它们的宽度不再影响.panel元素。
精确修复：将.container上的max-width:90vw更改为width:90vw，从而解决了问题。
出现这个问题的原因是，我没有设置width属性，因此容器的宽度为0，因此没有显示任何内容。此外，Max-width属于限制，而不是设置width。