Flexbox adjust height of the img after div rotate

Question

Here is my codepen : https://codepen.io/Johngtrs/pen/oNWLYEw

When I click on the rotate button the div img container rotate, but the image overlap on the other row.

How it's possible to adjust the height of the img if needed ?

CSS:

.row-documents {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.row-documents img {
    width: 615px;
}
.img-document {
    transition: all 0.3s ease;
}
.rotate-button {
    margin: 0 10px;
    width: 50px;
    display: flex;
    justify-content: center;
}

HTML:

<div>
  <div class="row-documents">
    <div class="img-document">
      <img src="https://picsum.photos/1300/740" class="img-responsive">
    </div>

    <div class="rotate-button">
      <button class="btn btn-default btn-rotate">
        Rotate
      </button>
    </div>

    <div class="img-document">
      <img src="https://picsum.photos/1300/740" class="img-responsive">
    </div>

    <div class="rotate-button">
      <button class="btn btn-default btn-rotate">
        Rotate
      </button>
    </div>
  </div>

  <hr />

  <div class="row-documents">
    <div class="img-document">
      <img src="https://picsum.photos/1300/740" class="img-responsive">
    </div>
    <div class="rotate-button">
      <button class="btn btn-default btn-rotate">
        Rotate
      </button>
    </div>
    <div class="img-document">
      <img src="https://picsum.photos/1300/740" class="img-responsive">
    </div>
    <div class="rotate-button">
      <button class="btn btn-default btn-rotate">
        Rotate
      </button>
    </div>
  </div>

</div>

Answer 1

For the moment you cannot do this with Css only

you can check if your image is on the portrait format and change height of the parent when it is so

$('.btn-rotate').on('click', function () {
  let $img = $(this).parent().prev();
  let width = $img.width();
  let height = $img.height();
  let angle = ($img.data('angle') + 90) || 90;
  let scale = height < width ? height / width : width / height;
  if (angle % 180) {
    $img.css({'transform': 'rotate(' + angle + 'deg) scale('+ scale +')'});
    $img.data('angle', angle);
  }
  else {
    $img.css({'transform': 'rotate(' + angle + 'deg) scale(1)'});
    $img.data('angle', angle);
  }
})

.row-documents {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.row-documents img {
  max-width: 215px;
  max-height: 200px;
}

.img-document {
  transition: all 0.3s ease;
  transform-origin: center center;
  display: flex;
  justify-content: center;
}

.rotate-button {
  margin: 0 10px;
  width: 50px;
  display: flex;
  justify-content: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div>
  <div class="row-documents">
    <div class="img-document">
      <img src="https://picsum.photos/1300/740" class="img-responsive">
    </div>

    <div class="rotate-button">
      <button class="btn btn-default btn-rotate">
        Rotate
      </button>
    </div>

    <div class="img-document">
      <img src="https://picsum.photos/740/1300" class="img-responsive">
    </div>

    <div class="rotate-button">
      <button class="btn btn-default btn-rotate">
        Rotate
      </button>
    </div>
  </div>

  <hr />

  <div class="row-documents">
    <div class="img-document">
      <img src="https://picsum.photos/1300/740" class="img-responsive">
    </div>
    <div class="rotate-button">
      <button class="btn btn-default btn-rotate">
        Rotate
      </button>
    </div>
    <div class="img-document">
      <img src="https://picsum.photos/1300/740" class="img-responsive">
    </div>
    <div class="rotate-button">
      <button class="btn btn-default btn-rotate">
        Rotate
      </button>
    </div>
  </div>

</div>