Question

我试图溢出不适合父母的内容。但我无法做到。

这是代码

HTML：

<div class="content">
  <div class="header"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>
  <div class="bottom"> 
     <div class="container">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus doloribus beatae iure cum culpa est eum quas nulla adipisci alias iusto ea aut asperiores. Animi nemo quod incidunt ratione voluptatum.
    </div>
  </div>
</div>

的CSS

.content{
 height:200px;
 width: 100px;
 background:lightblue;
 display:inline-block;  
}

.header{
 background:red;
 display:inline-block;
}
.bottom{
 height:auto;
 display:inline-block;
}
.container{
  height: inherit;
  overflow:hidden;
}

我的jsFiddler

谢谢

Answer 1

已修复此问题 - http://jsfiddle.net/5s79bqvb/3/

.content{
    height:200px;
    width: 100px;
    background:lightblue;
    display:inline-block;  
     overflow:auto; // you need to set overflow = auto to the parent element 
}

Answer 2

所以你希望蓝框中的文字不会突破蓝框？

我已经通过以下几种方式完成了这项工作：

将overflow: hidden设为.content或
在.bottom或.container上设置固定高度，并将overflow: hidden;应用于其中之一。

溢出高度自动

2 个答案: