Height Property is not working on Section and Even on Div?-CodePudding

I have created a section and in which there is a div (wrapper of the image) I am tried to give height property to div and also the Section But it is not working I know there are many questions on stack overflow regarding Height property and I checked many of them but none on them worked for me.

img{
  width:100%
}
section{
 height:50px;
}
section div{
  width:100%;
  height:50px;
}

<section>
    <div>
      <img src="https://images.unsplash.com/photo-1593642532400-2682810df593?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw=&auto=format&fit=crop&w=500&q=60" alt="">
    </div>
  </section>

So please can anyone tell me Why it is not working and How can make the height property work?

CodePudding user response：

Overflow works fine:

img{
  width:100%
}
section{
 height:50px;
 overflow: auto;
}
section div{
  width:100%;
  height:50px;
}

<section>
    <div>
      <img src="https://images.unsplash.com/photo-1593642532400-2682810df593?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw=&auto=format&fit=crop&w=500&q=60" alt="">
    </div>
  </section>

CodePudding user response：

try this give float left to sections and div

<!DOCTYPE html>
<html>
<style>
img{
  width:100%
}
section{
float:left;
width:100%;
 height:50px;
}
section div{
float:left;
  width:100%;
  height:50px;
}
section div img{
height:100%;
}

</style>
<body>

<section>
    <div>
      <img src="https://images.unsplash.com/photo-1593642532400-2682810df593?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw=&auto=format&fit=crop&w=500&q=60" alt="">
    </div>
  </section>
</body>

</html>