How do I prevent image overflowing its div container - html

Question

I have this code:
.container {
margin-right: auto;
margin-left: auto;
max-width: 1400px;
padding-left: 1rem;
padding-right: 1rem;
}
.grid { display: grid }
.vh-100 { min-height: 100vh;}
.grid-gap { grid-gap: 0.7rem; }
.flex { display: flex; -webkit-display: flex; -moz-display: flex; -ms-display: flex; -o-display: flex; }
.text-center { text-align: center; }
.flex-dir-col { flex-direction: column; }
.relative { position: relative; }
.absolute { position: absolute; }
.img-fluid { max-width: 100%; height: auto; }
.content-wrapper .container {
grid-auto-flow: row dense;
-ms-grid-columns: 3fr 1fr;
grid-template-columns: 3fr 1fr;
-ms-grid-rows: 1fr;
grid-template-rows: 1fr;
gap: 0px 35px;
}
.content-wrapper .container .main-content {
-ms-grid-row: 1;
-ms-grid-row-span: 1;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
grid-area: 1 / 1 / 2 / 3;
}
.content-wrapper .container .main-content .post-content .post-content-top .post-sharing .icon {
width: 50px;
height: 50px;
background-color: #f1f1f1;
margin-bottom: 20px;
border-radius: 30%;
-webkit-border-radius: 30%;
-moz-border-radius: 30%;
-ms-border-radius: 30%;
-o-border-radius: 30%;
color: #3ab77d;
-webkit-box-shadow: 0px 5px 15px -5px #00000070;
box-shadow: 0px 5px 15px -5px #00000070;
}
.content-wrapper .container .main-content .post-content .post-content-top .post-sharing .icon i {
line-height: 50px;
font-size: 20px;
transition: all .4s;
-webkit-transition: all .4s;
-moz-transition: all .4s;
-ms-transition: all .4s;
-o-transition: all .4s;
}
.content-wrapper .container .main-content .post-content .post-content-top .post-sharing .icon:hover {
background-color: #3ab77d;
}
.content-wrapper .container .main-content .post-content .post-content-top .post-sharing .icon:hover i {
color: #f1f1f1;
}
.content-wrapper .container .main-content .post-content .post-content-top .post-featured-image {
overflow: hidden;
}
.content-wrapper .container .main-content .post-content .post-content-top .post-featured-image .post-date {
top: 1rem;
left: 1rem;
background-color: #fff;
width: 50px;
height: 50px;
line-height: 1.5;
}
.content-wrapper .container .main-content .post-content .post-content-top .post-featured-image .post-date .day {
font-size: 1rem;
padding-top: .2rem;
}
.content-wrapper .container .main-content .post-content .post-content-top .post-featured-image .post-date .month {
font-size: 0.75rem;
}
.content-wrapper .container .sidebar {
-ms-grid-row: 1;
-ms-grid-row-span: 1;
-ms-grid-column: 2;
-ms-grid-column-span: 1;
grid-area: 1 / 2 / 2 / 3;
position: relative;
background-color: rgba(255, 0, 0, 0.468);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.3/font/bootstrap-icons.css" rel="stylesheet"/>
<section class="content-wrapper mt-2 mb-2">
<div class="container grid vh-100 grid-gap">
<div class="main-content">
<div class="post-content">
<div class="post-content-top flex">
<div class="post-sharing flex flex-dir-col mr-1 text-center">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter"></i>
<i class="bi bi-reddit"></i>
<i class="bi bi-whatsapp"></i>
</div>
<div class="post-featured-image relative">
<img src="https://cdn.pixabay.com/photo/2022/06/14/17/30/beach-7262493_1280.jpg" class="img-fluid">
<div class="post-date absolute flex flex-dir-col text-center">
<span class="day">23</span>
<span class="month">JUL</span>
</div>
</div>
</div>
</div>
</div>
<div class="sidebar">
This is the sidebar
</div>
</div>
</section>
So this should be a blog like layout with a main content and a sidebar on the right. My problem is that the image is overflowing its div and it flows underneath the sidebar. I added a slightly transparent background color to the sidebar so it's more visible.
I tried to add max-width: 100% and height: auto; to the image as recommended here, but it didn't work. I also tried to add overflow: hidden to the parent div of the image, but no luck. But I wouldn't want to clip the image anyway.
I don't understand because max-width: 100% and height: auto; should make the image responsive, right?
Any idea what I'm doing wrong? Thanks

Answer 1

There are 2 ways to achieve this:
You can cut the image which is being overflowed.
overflow-x: hidden;
You can either give detailed stylings, like this
*{
margin: 0;
padding:0;
}
img{
width: 100%;
height: 100%;
}
.image_container{
max-width: 100vw;
max-height: 100vw;
}
<div class="image_container">
<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/80a9d98d-327f-4bb2-b173-4298d710e51c/derkflv-9f975f3d-791f-4e16-8d9d-fb0a9e5e0554.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzgwYTlkOThkLTMyN2YtNGJiMi1iMTczLTQyOThkNzEwZTUxY1wvZGVya2Zsdi05Zjk3NWYzZC03OTFmLTRlMTYtOGQ5ZC1mYjBhOWU1ZTA1NTQucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.eEDVAlJGBqXo6OeZEORXWk1veGSHFL-ZTUMz43Jtr3Q" alt="image">
<div>