Removing fixed height makes the slider collapse intially when it loads

I have created a very simple responsive slider with vanilla JavaScript. It works great but has one issue which I am not able to figure it out. I am hoping someone from this community can help me.

Below is the slider demo I have in CodePen

CodePen Link

What I am trying to do is to remove the fixed height I have on .pc-mslider container, if I remove the fixed height the slider is collapsed when is it loaded due to the fact the height is not set. If I set the height and resize the window, it looks whacked either with huge space at the bottom or the content is hidden.

I am looking a way to fix this.

Thanks

I tried removing the height and calculating the height based on first slide using the code below

// Set the initial height based on the first slide
const slider = document.querySelector('.pc-mslider');
const firstSlideHeight = slides[0].offsetHeight;
slider.style.height = `${firstSlideHeight}px`;

But this is not working as it adds inline style height:0px .pc-mslider