How to deal with white spaces after the image using flex?

All looks fine when we deal with desktop version, but after going to a mobile version, some strange space after the image occurs, but I've set height: 100%, but it still appends some white spaces under the image, regardless of height.

I've attached a photo of how it looks like, you can see a white space after the image, when we get to less than 768px.

enter image description here

Html code:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="./css/utilities.css">
      <link rel="stylesheet" href="./css/main.css">
      <link rel="stylesheet" media="screen and (max-width: 768px)" href="./css/mobile.css">
      <title>Blog</title>
   </head>
   <body>
      <section id="blog1">
      <div class="row">
         <div class="column">
            <img src="./img/blog/blog1.jpg" alt="">
         </div>
         <div class="column bgLight">
            <div class="column2">
               <h2>
               Blog Post One</h4>
               <p class="meta">
                  <i class="fas fa-user"></i> Posted by <strong>John Doe</strong> | April 19 2020 
               </p>
               <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic suscipit eligendi
                  exercitationem doloribus animi quasi sint quod, asperiores sed numquam saepe fuga, odit
                  vitae praesentium ea error! Esse voluptas laborum ratione minus blanditiis! Est,
                  voluptate? Veritatis ipsum natus quas ducimus.
               </p>
            </div>
         </div>
      </div>
   </body>

CSS Main code:

.row {
    display: flex;
}

.column1, .column2 {
    height: 100%;
}


.row .column {
    flex: 1;
    flex-basis: 100%;
}

.column2 {
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    line-height: 2rem;
}

img {
    width: 100%;
    height: 100%;

}

CSS mobile code:

.column  {
    max-width: 100%;
    flex: 100%;
}

.row {
    flex-direction: column;
}

Change your .column to

.column {
  justify-content: center;
  display: flex;
  flex-direction: row;
  overflow: hidden;}

and your img to

img {
  flex: 1;
  height: 100%;}

How to deal with white spaces after the image using flex?

Related

Recent Posts