Div resize according to increase in other div css only

问题: I have these two divs. The inner div needs to make the outer div resize as the div fills up with words. Simply the outer div should resize as the content of the inner div i...

问题:

I have these two divs. The inner div needs to make the outer div resize as the div fills up with words. Simply the outer div should resize as the content of the inner div increases.

Note: The inner div increases height upwards hence the outer div should also increase upwards

Check out this fiddle https://jsfiddle.net/kevinrobert3/zguo4vbc/51/ as the words in inner div increase and the div increases in height, I need the outer div to match up and increase too

<div class="wrapper" id="in">
  <div class="inner-div" id="inner-div">
    it is a long established fact that a reader will be distracted by 
    the readable content of a page when looking at its layout. 
  </div>
</div>

The css for it is

.wrapper{
    width:70%;
    max-height: 500px;
    min-height: 150px;
    position: relative;
    background-color: aqua;
    top: 90px;
    height: auto;

}
.wrapper .inner-div  {
    position: absolute;
    display: inline-block;
    bottom: 0px;
    max-width: 230px;
    min-height: 1.5em;
    border: 2px solid blue;
    margin-left: 55px;
    padding: 4px;
    border-radius: 4px;
    line-height: normal;
    color: red;
}

回答1:

I think that's because of your position: absolute; in your inner-div. Removing it resolves your problem. But maybe you needed it for some other reason ?


回答2:

You can use

display: flex;
align-items: flex-end; 

in .wrapper and remove position: absolute; in .inner-div. Just like this: https://jsfiddle.net/1zfwso06/

  • 发表于 2019-01-23 03:59
  • 阅读 ( 228 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除