Syed Syed - 4 months ago 8
HTML Question

Auto adjust vertial space between two DIVs

Parent

div
has fixed height of
300px
, depending upon how much content is filled in the second
div
which need to be placed below (not beside) the first
div
and this needs to auto adjust height and fills remaining space.

<div class="parent">
<div class="child-one">
Auto adjust the space of this div depending upon "child-two" div height
</div>
<div class="child-two">
Height of this div will depend upon the data filled.
</div>
</div>

Answer

Hope you are looking for something like this

.parent{
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  border: 1px solid blue;
}
.child-one{
  flex: 1;
  display: flex;
  align-items: center;
  background: blue;
}
.child-two{
  background: red;
}
.parent div{
  padding: 5px 10px;
}
<div class="parent">
    <div  class="child-one">
        Auto adjust the space of this div depending upon "child-two" div heightLorem ipsum dolor sit amet, quas doming inermis at per, discere mediocrem omittantur ei vis, graeci moderatius at qui. Praesent convenire eloquentiam nec te
    </div>
    <div class="child-two">
        Height of this div will depend upon the data filled.Lorem ipsum dolor sit amet, quas doming inermis at per, discere mediocrem omittantur ei vis, graeci moderatius at qui. Praesent convenire eloquentiam nec te
    </div>
</div>