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

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.

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 >
         <div >
            <img src="./img/blog/blog1.jpg" alt="">
         </div>
         <div >
            <div >
               <h2>
               Blog Post One</h4>
               <p >
                  <i ></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;
}

CodePudding user response：

Change your .column to

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

and your img to

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