溢出：滚动仍然溢出
Overflow: scroll still Overflowing
问题是当我将页面缩小到某个点时，<p> 元素的顶部溢出，奇怪的是底部没有溢出。明确地说，我不想溢出。
这是一个 JSFiddle link：https://jsfiddle.net/maep468x/1
您会看到，当您 运行 并将结果 window 缩小到大约 350 像素时，<p> 元素开始溢出。
我已经尝试从 .main-content 规则中删除我的行高和字体大小属性，但它仍然溢出。
为了以防万一，我也会把代码放在这里
<main>
<div id="header-container">
<h1>My Life</h1>
</div>
<div class="main-container">
<div class="main-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
</p>
</div>
<div class="img-container"><img src="../img/background-3062024.jpg" alt="starry night sky" /></div>
</div>
<div class="main-container" id="right-side">
<div class="img-container"><img src="../img/bali-2975787.jpg" alt="Bali beach sunset" /></div>
<div class="main-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
</p>
</div>
</div>
<div class="main-container">
<div class="main-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
</p>
</div>
<div class="img-container"><img src="../img/bali-1514132_1920.jpg" alt="bali ricefield" /></div>
</div>
</main>
main {
background-color: rgba(0, 128, 0, 0.5);
}
#header-container {
display: flex;
width: 100%;
height: 200px;
justify-content: center;
align-items: center;
font-size: calc(5px + 2vw);
border-bottom: 2px solid #000;
background-image: url("../img/panoramic-3358822_1920.jpg");
background-size: cover;
text-shadow: 0.5px 0.25px 2px #d49522;
}
.main-container {
display: flex;
height: fit-content();
}
.main-content {
display: flex;
height: 400px;
font-family: Georgia;
font-size: calc(10px + 0.5vw);
line-height: 24px;
overflow-y: scroll;
padding: 10px;
background-color: rgba(0, 128, 0, 0.25);
}
.img-container {
min-width: 600px;
}
.img-container img {
max-width: 100%;
height: auto;
}
@media only screen and (max-width: 930px) {
.main-container {
flex-wrap: wrap;
}
.main-content {
align-items: center;
}
}
将 属性 对齐项从 align-items: center; 更改为 align-items: flex-start; 并针对移动设备屏幕设置 height: auto。
main {
background-color: rgba(0, 128, 0, 0.5);
}
#header-container {
display: flex;
width: 100%;
height: 200px;
justify-content: center;
align-items: center;
font-size: calc(5px + 2vw);
border-bottom: 2px solid #000;
background-image: url("../img/panoramic-3358822_1920.jpg");
background-size: cover;
text-shadow: 0.5px 0.25px 2px #d49522;
}
.main-container {
display: flex;
height: fit-content();
}
.main-content {
display: flex;
height: 400px;
font-family: Georgia;
font-size: calc(10px + 0.5vw);
line-height: 24px;
overflow-y: scroll;
padding: 10px;
background-color: rgba(0, 128, 0, 0.25);
}
.img-container {
min-width: 600px;
}
.img-container img {
max-width: 100%;
height: auto;
}
@media only screen and (max-width: 930px) {
.main-container {
flex-wrap: wrap;
}
.main-content {
align-items: flex-start;
height: auto;
}
}
<main>
<div id="header-container">
<h1>My Life</h1>
</div>
<div class="main-container">
<div class="main-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
</p>
</div>
<div class="img-container"><img src="../img/background-3062024.jpg" alt="starry night sky" /></div>
</div>
<div class="main-container" id="right-side">
<div class="img-container"><img src="../img/bali-2975787.jpg" alt="Bali beach sunset" /></div>
<div class="main-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
</p>
</div>
</div>
<div class="main-container">
<div class="main-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
</p>
</div>
<div class="img-container"><img src="../img/bali-1514132_1920.jpg" alt="bali ricefield" /></div>
</div>
</main>
问题是当我将页面缩小到某个点时，<p> 元素的顶部溢出，奇怪的是底部没有溢出。明确地说，我不想溢出。
这是一个 JSFiddle link：https://jsfiddle.net/maep468x/1
您会看到，当您 运行 并将结果 window 缩小到大约 350 像素时，<p> 元素开始溢出。
我已经尝试从 .main-content 规则中删除我的行高和字体大小属性，但它仍然溢出。
为了以防万一，我也会把代码放在这里
<main>
<div id="header-container">
<h1>My Life</h1>
</div>
<div class="main-container">
<div class="main-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
</p>
</div>
<div class="img-container"><img src="../img/background-3062024.jpg" alt="starry night sky" /></div>
</div>
<div class="main-container" id="right-side">
<div class="img-container"><img src="../img/bali-2975787.jpg" alt="Bali beach sunset" /></div>
<div class="main-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
</p>
</div>
</div>
<div class="main-container">
<div class="main-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
</p>
</div>
<div class="img-container"><img src="../img/bali-1514132_1920.jpg" alt="bali ricefield" /></div>
</div>
</main>
main {
background-color: rgba(0, 128, 0, 0.5);
}
#header-container {
display: flex;
width: 100%;
height: 200px;
justify-content: center;
align-items: center;
font-size: calc(5px + 2vw);
border-bottom: 2px solid #000;
background-image: url("../img/panoramic-3358822_1920.jpg");
background-size: cover;
text-shadow: 0.5px 0.25px 2px #d49522;
}
.main-container {
display: flex;
height: fit-content();
}
.main-content {
display: flex;
height: 400px;
font-family: Georgia;
font-size: calc(10px + 0.5vw);
line-height: 24px;
overflow-y: scroll;
padding: 10px;
background-color: rgba(0, 128, 0, 0.25);
}
.img-container {
min-width: 600px;
}
.img-container img {
max-width: 100%;
height: auto;
}
@media only screen and (max-width: 930px) {
.main-container {
flex-wrap: wrap;
}
.main-content {
align-items: center;
}
}
将 属性 对齐项从 align-items: center; 更改为 align-items: flex-start; 并针对移动设备屏幕设置 height: auto。
main {
background-color: rgba(0, 128, 0, 0.5);
}
#header-container {
display: flex;
width: 100%;
height: 200px;
justify-content: center;
align-items: center;
font-size: calc(5px + 2vw);
border-bottom: 2px solid #000;
background-image: url("../img/panoramic-3358822_1920.jpg");
background-size: cover;
text-shadow: 0.5px 0.25px 2px #d49522;
}
.main-container {
display: flex;
height: fit-content();
}
.main-content {
display: flex;
height: 400px;
font-family: Georgia;
font-size: calc(10px + 0.5vw);
line-height: 24px;
overflow-y: scroll;
padding: 10px;
background-color: rgba(0, 128, 0, 0.25);
}
.img-container {
min-width: 600px;
}
.img-container img {
max-width: 100%;
height: auto;
}
@media only screen and (max-width: 930px) {
.main-container {
flex-wrap: wrap;
}
.main-content {
align-items: flex-start;
height: auto;
}
}
<main>
<div id="header-container">
<h1>My Life</h1>
</div>
<div class="main-container">
<div class="main-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
</p>
</div>
<div class="img-container"><img src="../img/background-3062024.jpg" alt="starry night sky" /></div>
</div>
<div class="main-container" id="right-side">
<div class="img-container"><img src="../img/bali-2975787.jpg" alt="Bali beach sunset" /></div>
<div class="main-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
</p>
</div>
</div>
<div class="main-container">
<div class="main-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
</p>
</div>
<div class="img-container"><img src="../img/bali-1514132_1920.jpg" alt="bali ricefield" /></div>
</div>
</main>