Div always matching each others even when window/outer div change

Question

I am trying to match the height of each slide based on the highest one. I see that I can use “offsetHeight”, but that is a set of height when the code load. I want to make it fixable when the window/outer div change (I am using flexbox for the outer)

$(document).ready(function() {
  var offsetHeight = document.getElementsByClassName('highest').offsetHeight;
  $('carousel > div').style.height = offsetHeight + 'px';
});

.carousel-wrap {
  display: flex;
  flex-wrap: wrap;
}

.carousel>div {
  background-color: #E3E3E3;
  margin: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="carousel-wrap">
  <div class="carousel">
    <div class="band slide1">1</div>
    <div class="band slide2" id="highest">2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="band slide3">3</div>
  </div>
</div>

Answer 1

I put a resize function after, but somehow it did not work when I resize the window. The .carousel .band did not clear up the inline height and put in a new one.

$(document).ready(function() {
  var offsetHeight = $('#highest').outerHeight();
  $('.carousel .band').outerHeight(offsetHeight);
});

$( window ).resize(function() {
  var offsetHeight = $('#highest').outerHeight();
  $('.carousel .band').css('height','auto').outerHeight(offsetHeight);
});

Answer 2

I would suggest you use jQuery's built in methods.

1. In your HTML you have id="highest" but you are trying to access it through the class name in your JavaScript. The appropriate way to access the <div> with its id using jQuery is $('#highest').
2. To access the height of the slide use jQuery's outerHeight function (which includes the element's padding): $('#highest').outerHeight();. jQuery outerHeight function
3. As weegee commented, add a '.' before carousel in your jQuery. You can then set the height using $('.carousel > div').outerHeight(offsetHeight);.

You might also consider using the class .band instead of .carousel > div if you are not using it for other elements.

$(document).ready(function() {
  var offsetHeight = $('#highest').outerHeight();
  $('.carousel > div:not(#highest)').outerHeight(offsetHeight);
  
  $(window).resize(function() {
    var offsetHeight = $('#highest')[0].scrollHeight;
    $('.carousel > div:not(#highest)').outerHeight(offsetHeight);
  });
});

.carousel-wrap {
  display: flex;
  flex-wrap: wrap;
}

.carousel > div {
  background-color: #E3E3E3;
  margin: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="carousel-wrap">
  <div class="carousel">
    <div class="band slide1">1</div>
    <div class="band slide2" id="highest">2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="band slide3">3</div>
  </div>
</div>

Edit

To get the heights of the elements to update as the size of the window changes, I added a .resize() callback to the script. This repeats the code executed when the document first loads. To make sure the height of the #highest div doesn't change (but stays the width of its content, I added a :not() selector to only set the heights of the other <div>s.