如何让较大的子div始终适合父div？

Question

HTML

<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
</div>

样式表

.child1, .child2, .child3{
    display: block;
    float: left;
}

.parent{
    height: 200px;
}

子div可能有一个大于200px的高度，但我无法弄清楚如何使它适合父级而不截断子div的内容。

Answer 1

请参阅此fiddle

正如我的评论中所提到的，您可以使用overflow:auto;作为.parent，这将使父级可滚动。

<强> CSS

.child1,.child2,.child3 {
    height:100px;
    width:50%;
    margin:10px;
}
.parent {
    height: 200px;
    overflow:auto;
}

如果您只想使用垂直滚动条，请overflow-x:auto使用.parent代替overflow:auto;

有关overflow。

的详情，请参阅docs

Answer 2

在父级或子级上使用overflow属性。

http://www.w3schools.com/cssref/pr_pos_overflow.asp

.parent {
  height:200px;
  width:400px;
  border:1px solid;
}

.parent div {
  float:left;
  width:33%;
  height:100%;
  overflow-y:auto;
}

<div class="parent">
  <div>Lorem Ispum</div>  
  <div>Lorem Ispum</div>
  <div>Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum</div>
</div>