CODEWITHSUNDEEP
htmlcss
Taio
Taio

Reputation: 3724

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

Upvotes: 1

Views: 2453

Answers (2)

Cuong Vu
Cuong Vu

Reputation: 3723

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/

Upvotes: 2

mdubus
mdubus

Reputation: 130

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 ?

Upvotes: 2

Related Questions