Make height of div equal to the height of the content in flex container

Asked Oct 06 '18 at 21:00

Active Oct 06 '18 at 21:04

Viewed 15 times

How can I make the height of the child div be only as long as the content (text in this case) is ?

.wrapp{
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 1200px;
}

.child{
  border: 1px solid red;
  width: 50px;
  height: auto;
  margin: 20px
}

<div class='wrapp'>
<div class='child'>text text text texttext texttext texttext texttext texttext texttext texttext texttext texttext text</div>
<div class='child'>text texttext text</div>


</div>

edited Oct 06 '18 at 21:04

Michael Benjamin

346,931
104
581
701

asked Oct 06 '18 at 21:00

Operter

Add `align-items: flex-start` to the container. – Michael Benjamin Oct 06 '18 at 21:03
Don't use display flex, just use display inline-block or display block with float right/left. – Spleen Oct 06 '18 at 21:04
@Michael_B That works, but if i have 4 divs, 2 and the other 2 underneath them, there is space between them. Is there a way I can get rid of that too ? – Operter Oct 06 '18 at 21:13
Sounds like a Masonry layout. See [this post](https://stackoverflow.com/q/34480760/3597276). If that isn't relevant, you can post another question. – Michael Benjamin Oct 06 '18 at 21:15

Make height of div equal to the height of the content in flex container

0 Answers0