css - 可滚动段落对其父级的高度有限

Question

我想让P能够获取比高度所能容纳的更多的文本，这样文本就可以向下滚动来阅读。 DIV CLASS="others" 有我想要的正确高度。 (500 像素)

问题是，当我使用 overflow:scroll 函数时，它会一直移动到页面底部。

编辑:忘记提及我希望标题“新闻”和“产品”没有滚动条。

谢谢。

.others {
position: relative;
vertical-align: middle;
width: 70%;
background-color: #d0d0d0;
height: 500px;
margin: 0px;
padding: 40px 15% 20px 15%;
display: flex;
justify-content: center;
}

.others div {
width: 400px;
display: inline-block;
float: left;
margin: 0px 15px;
}

.others #news {
background-color: black;
color: white;
text-align: center;
}

.others #products {
background-color: black;
color: white;
text-align: center;
}

.others a {
color: white;
text-decoration: none !important;
}

.others #newsfeed, #productsfeed {
margin: 0px;
padding: 10px 0px;
background-color: lightgreen;
}

.others p {
margin: 0px;
padding: 10px 10px;
vertical-align: middle;
height: 800px;
overflow: scroll;
}

<DIV CLASS="others">
  <DIV ID="news">
	<A HREF="#"><H3 ID="newsfeed">News</H3></A>
	<P>News will come here.</P>
  </DIV>
  <DIV ID="products">
	<A HREF="#"><H3 ID="productsfeed">Products</H3></A>
	<P>Cool photos here.</P>
  </DIV>
</DIV>

Answer 1

正如我在 my comment 中提到的，该问题是由指定内部段落的显式高度引起的。

此外，为了使内部段落尊重其父级的高度(#news和#products flex 元素它们的 Flex 容器具有相同的高度，.other)，您可以将父级的 display 类型更改为 flex并将其 flex-direction 设置为 column。

然后将 flex: 1; 赋予段落，如下所示:

<强> Example Here

#news, #products {
    display: flex;
    flex-direction: column;
}

#news p, #products p {
    flex: 1;
    overflow: auto; /* up to you */
}

作为旁注:为了浏览器支持，请确保您也包含了 Flexbox 的旧(前缀)语法。您可以使用类似 Auto Prefixer 的工具来实现这一目标。