Question

我有一个div的问题溢出了它的父母的评论..我一直在尝试CSS的几个选项，但没有成功。

example

<div class="col-md-8 depos>
  <div class="col-md-7 depo-cont>
    <div class="depo">
      <h5>Marcio</h5>
      <p>Vou de novo</p>
    </div>
  </div>
 <div class="col-md-5">Form here</div>
</div>

主要问题是试图溢出“depo-cont”div扩展父母的底部。关于如何处理这个的任何想法？

Answer 1

如果目标是在.depos容器上有一个固定的高度，那么当它变得太高时你可以告诉它滚动它的内容：

.depos {overflow: scroll;}

简单演示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

.outer {height: 200px; width: 100px; overflow: scroll;}

</style>
</head>
<body>

<div class="outer">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, et, officiis, molestiae, ea veniam esse nam enim eaque ad tenetur cum incidunt consectetur iste ullam eos veritatis cupiditate tempora consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, et, officiis, molestiae, ea veniam esse nam enim eaque ad tenetur cum incidunt consectetur iste ullam eos veritatis cupiditate tempora consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>

</body>
</html>

Answer 2

修正了它将子元素的max-height设置为与父元素相同（一旦内容超出大小，自然会导致溢出。）

.depo-cont{
max-height:500px;
overflow:scroll;}

fix

父母内部溢出的子div正在扩展父级

2 个答案: