How to set height with css to be the same as the next class

Question

Maybe this is a general question, but please help me. I have a class in CSS which I often use in my HTML, e.g.

.boxBooking {
  width: 14.28%;
}

<div class="boxBooking">
  ....
</div>

<div class="boxBooking">
  test<br/> test
  <br/>
</div>

<div class="boxBooking">
  a<br/> b
  <br/> c
  <br/> d
  <br/>
</div>

If I set height property in CSS, then the height will not dynamically follow the "highest" in my HTML.

I want, which one is the "highest" will be the others default height property, even if the others have no content. Is this possible and how can I do this.

score 0 · Answer 1 · answered Oct 29 '18 at 04:45

You can use flex-box for this. Just place a wrapper div around the boxBooking divs and set it to display: flex. Then each of the divs in it - set to flex-gorw: 1 and they will all take the same space.

Note I just put a red border around them to show they are all the same height.

.boxBooking-wrapper  {
display: flex;
}


.boxBooking{
  width:14.28%;
  flex-grow:1;
  border: solid 1px red;
}

<div class="boxBooking-wrapper">
  <div class="boxBooking">
  </div>

<div class="boxBooking">
  test<br/>
  test<br/>
</div>

  <div class="boxBooking">
    a<br/>
    b<br/>
    c<br/>
    d<br/>
  </div>
</div>

score 0 · Answer 2 · answered Oct 29 '18 at 04:49

You can try using flexbox check blow updated snippet

.main {
  display: flex;
}

.boxBooking {
  width: 100%;
  border: 1px solid red;
  margin: 2px;
}

<div class="main">
  <div class="boxBooking">

  </div>

  <div class="boxBooking">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  </div>

  <div class="boxBooking">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  </div>
</div>

Hee Hee - I already posted this solution. Its a race in here with the answers :) — gavgrif, Oct 29 '18 at 04:50
@gavgrif just saw your answer both the answers are correct using same solution :) — Vikas Jadhav, Oct 29 '18 at 04:54

score 0 · Answer 3 · answered Oct 29 '18 at 05:20

Use display:table/table-cell

.boxBooking-wrapper  {
  display:table;
  
}


.boxBooking{
  width:14.28%;
  display:table-cell;
  border: 1px solid black;
}

<div class="boxBooking-wrapper">
  <div class="boxBooking">
  </div>

<div class="boxBooking">
  test<br/>
  test<br/>
</div>

  <div class="boxBooking">
    a<br/>
    b<br/>
    c<br/>
    d<br/>
  </div>
</div>

How to set height with css to be the same as the next class

3 Answers3