Why is the image getting chopped?

<div class="main-content">
                <div class="main-content-scroll">
              <div class="post">
                  <img class="post-img" src="profile-img.png">
                  <div class="post-text">
                          <h2>TEST </h2>
                          <p>Lorem ipsum</p>
                     </div>    
                 </div>
       </div>
</div>

.main-content{
    width: 800px; 
    height: 680px;
    position: relative;
}
.main-content-scroll{
    max-height: 100%;
    overflow-y: auto;
    background-color: red;
}
 .post {
    padding: 20px;
    display: flex;
    margin-bottom: 20px;
}
.post-img{
    margin-top: auto;
    margin-bottom: auto;
    width: 130px;
    margin-right: 20px;
    margin-left: -60px; 
}