Image not scaling responsively both width & height

Hello

ReactCrop container doesn’t seem to be containing the img (ReactCrop__image) when scaling. I can have it scale at smaller sizes but when the ReactCrop container height reaches my component height ReactCrop__image continues to grow.

Is there any CSS examples where the container, image and crop selection all scale proportionally and when boundaries are met all 3 stop scaling? My latest attempt is below where ReactCrop div is positioned centre centre in my component.

.component {
	position: relative;
	width: 100%;
	height: calc(100vh - 480px);
	.ReactCrop {
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		width: auto;
		height: auto;
		max-height: 100%;
		transform: translate(-50%, -50%);
		.ReactCrop__image {
			display: block;
			width: auto;
			max-width: 100%;
			height: auto;
			max-height: 100%;
		}
	}
}

Cheers

[jakubwolny]

@DominicTobias fixed! thx a lot!

[jedierikb]

see here for fix: https://github.com/DominicTobias/react-image-crop/releases/tag/8.3.0