Why doesn't the image element resize to its real proportion under flexbox with object-fit: contain?

Question

I have a container where multiple images will appear in succession (a slide show). Some images are in landscape format, others in portrait. There are also two side panels that should occupy the remaining space on the left and right sides of the image container. Image and side panels have a fixed height, thus the width of the image (and central container) should adjust depending on the proportion of the image. However, I can't make this work.

html,body {
    margin:0;
}
main {
    display:flex;
    flex-direction:column;
}
h1 {
    margin:0;
    text-align:center;
    font-size:2em;
}
#divMain {
    background:orange;
    display:flex;
    height:50vh;
    padding:5vh 0;
}
#divBotE,#divBotD {
    background:lime;
    flex:1 0 auto;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}
h3 {
    background:black;
    color:white;
    font-size:0.75em;
    text-align:center;
    margin:0 0.5em;
    border-radius:1em;
    padding:0.5em;
}
#divSlides {
    background:white;
    display:flex;
    justify-content:center;
    flex:0 1 auto;
}
#imgSlide {
    object-fit:contain;
    height:100%;
  width:100%;
}

<main>
    <h1>Website X</h1>
    <div id='divMain'>
        <div id='divBotE'>
            <h3>Button 1</h3>
            <h3>Button 2</h3>
            <h3>Button 3</h3>
        </div>
        <div id='divSlides'>
            <img id='imgSlide' src='https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/Flor_de_Orqu%C3%ADdea_-_Orchid_Flower.JPG/1280px-Flor_de_Orqu%C3%ADdea_-_Orchid_Flower.JPG' />
        </div>
        <div id='divBotD'>
            <h3>Button 4</h3>
            <h3>Button 5</h3>
            <h3>Button 6</h3>
        </div>
    </div>
</main>

As you can see on the snippet, the original image is rather large, making the image object large too, even after resize. The white areas on the sides of the image should be occupied by the green panels. What am I doing wrong?

Answer 1

Something like this where most of the flex-related CSS is removed, with flex-grow set on the buttons divs and the img is given width auto rather than use contain?

html,body {
    margin:0;
}
main {
}
h1 {
    margin:0;
    text-align:center;
    font-size:2em;
}
#divMain {
    background:orange;
    display:flex;
    height:50vh;
    padding:5vh 0;
}
#divBotE,#divBotD {
    background:lime;
    flex-grow: 1;
    float: left;
}
h3 {
    background:black;
    color:white;
    font-size:0.75em;
    text-align:center;
    margin:0 0.5em;
    border-radius:1em;
    padding:0.5em;
}
#divSlides {
    background:pink;
    float:left;
    width:auto;
    height:100%;
}
#imgSlide {
    height:100%;
  width:auto;
}

<main>
    <h1>Website X</h1>
    <div id='divMain'>
        <div id='divBotE'>
            <h3>Button 1</h3>
            <h3>Button 2</h3>
            <h3>Button 3</h3>
        </div>
        <div id='divSlides'>
            <img id='imgSlide' src='https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/Flor_de_Orqu%C3%ADdea_-_Orchid_Flower.JPG/1280px-Flor_de_Orqu%C3%ADdea_-_Orchid_Flower.JPG' />
        </div>
        <div id='divBotD'>
            <h3>Button 4</h3>
            <h3>Button 5</h3>
            <h3>Button 6</h3>
        </div>
    </div>
</main>

Answer 2

Set the max-width & max-height of the image instead of setting width & height css attributes.

And set the parent div display: contents and it will work.

html,body {
    margin:0;
}
main {
    display:flex;
    flex-direction:column;
}
h1 {
    margin:0;
    text-align:center;
    font-size:2em;
}
#divMain {
    background:orange;
    display:flex;
    height:50vh;
    padding:5vh 0;
}
#divBotE,#divBotD {
    background:lime;
    flex:1 0 auto;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}
h3 {
    background:black;
    color:white;
    font-size:0.75em;
    text-align:center;
    margin:0 0.5em;
    border-radius:1em;
    padding:0.5em;
}
#divSlides {
    background:white;
    display: contents;
}
#imgSlide {
  object-fit: contain;
  max-height: 100%;
  max-width: 100%;
}

<main>
    <h1>Website X</h1>
    <div id='divMain'>
        <div id='divBotE'>
            <h3>Button 1</h3>
            <h3>Button 2</h3>
            <h3>Button 3</h3>
        </div>
        <div id='divSlides'>
            <img id='imgSlide' src='https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/Flor_de_Orqu%C3%ADdea_-_Orchid_Flower.JPG/1280px-Flor_de_Orqu%C3%ADdea_-_Orchid_Flower.JPG' />
        </div>
        <div id='divBotD'>
            <h3>Button 4</h3>
            <h3>Button 5</h3>
            <h3>Button 6</h3>
        </div>
    </div>
</main>