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

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滚动。

<强>代码

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

更新

定义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>

Answer 3

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

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

<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>

现在它应该是好的！

＆＃13;

＆＃13;

data class Action(
     val key: String,
     val date: Date,
     val stringValue: String,
     val autoRecognitionStatus: MeasurementAutoRecognized,
     val recognitionId: String,
     val method: MeasurementMethod,
     val userKey: String,
     val userName: String,
     val isInRange: Boolean,
     var pictureUrl: String? = null,
     var remotePictureUrl: String? = null
)

＆＃13;

std::vector<bool>

＆＃13;

＆＃13;

＆＃13;