父级具有固定大小时，溢出自动在子元素中不起作用

Question

我创建了一个固定大小的父div，其中包含2个孩子，但我希望只有第二个会有overflow: auto;

不幸的是，它没有按预期工作......

这是我的片段：

.parent
{
	height: 200px;
	width: 100px;
	background-color: #F00;
	padding: 10px;
}

.second-child
{
	overflow: auto;
}

<div class="parent">
	<div class="first-child">
		Some content
	</div>
	<hr />
	<div class="second-child">
		"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
	</div>
</div>

有任何想法吗？

Answer 1

您可以使用max-height CSS属性。在max-height的帮助下，您可以设置最大高度。如果内容超过最大高度，将自动执行Y滚动。

码

.parent
{
	height: 200px;
	width: 100px;
	background-color: #F00;
	padding: 10px;
}

.second-child
{
	overflow: auto;
        max-height:100px
}

<div class="parent">
	<div class="first-child">
		Some content
	</div>
	<hr />
	<div class="second-child">
		"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
	</div>
</div>

Answer 2

你应该在溢出开始之前设置一个最大值......

编辑：将max-height设置为％，以便它始终在您不断变化的需求范围内。我把它保持在80％，因为它非常适合二胎

.second-child
{
  max-height: 80%;
    overflow: auto;
}

现在它应该是好的！

.parent
{
	height: 200px;
	width: 100px;
	background-color: #F00;
	padding: 10px;
}

.second-child
{
  max-height: 80%;
	overflow: auto;
}

<div class="parent">
	<div class="first-child">
		Some content
	</div>
	<hr />
	<div class="second-child">
		"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
	</div>
</div>

Answer 3

更新：

定义一个max-height，告诉浏览器溢出的长度

更新2：

1. 使容器成为一个表
2. 制作另外2个div的表行
3. 在第二个div中，将文本放在相对于绝对位置的位置

.parent {
  height: 200px;
  width: 100px;
  background-color: #F00;
  padding: 10px;
  display: table;
}

.first-child,
.second-child {
  display: table-row;
}

.second-child {
  height: 100%;
}

.second-child-content-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.second-child-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
}

<div class="parent">
  <div class="first-child">
    Some content
  </div>
  <hr />
  <div class="second-child">
    <div class="second-child-content-wrapper">
      <div class="second-child-content">
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </div>
    </div>
  </div>
</div>