0

I have something like this

<div class="container">
    <div class="child-1">
        <div>children </div>
        <div>children </div>
    </div>
    <div class="child-2">
        something
    </div>
</div>

The container is flexbox, and takes 100% of its parent's height (which is calculated by height: calc(100vh - 75px);)

Now I want the div "child-1" to only take up the size of the children. Right now it is the height of its parent, which is essentially 100%.

I don't want to set an arbitrary height as in the "child-1" I have stuff that collapses and expands so the height is always changing.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
chobo2
  • 83,322
  • 195
  • 530
  • 832
  • I think you need to add `align-items:flex-start` – Temani Afif Sep 05 '18 at 19:11
  • Please add your CSS as well, since you reference it in the post and also tagged [tag:css]. What you already have could change or invalidate some answers. In other words, you need a [mcve] here. – TylerH Sep 05 '18 at 19:14
  • @TemaniAfif - This does seem like what i need, can you explain why? – chobo2 Sep 05 '18 at 19:15
  • the default value is stretch so by default all the element will get stretched thus their height is the height of the parent ... I simply changed this : https://developer.mozilla.org/en-US/docs/Web/CSS/align-items – Temani Afif Sep 05 '18 at 19:17
  • @TemaniAfif - please make an answer as it is what I needed – chobo2 Sep 05 '18 at 19:28
  • @LGSon because I know a lot of duplicates for this kind of question ;) that's why I wanted to verify first before closing – Temani Afif Sep 05 '18 at 19:30
  • @LGSon it doesn't make it proper but it will make it dissapear after a period of time as it will get deleted automatically ... by the way, the question wasn't missing a lot, he simply described his CSS – Temani Afif Sep 05 '18 at 19:39
  • add to `child-1` : `margin-bottom:auto;`and it will stick at top of its row without expanding all the way to the bottom but only to its content's height.... – G-Cyrillus Sep 05 '18 at 19:44

0 Answers0