When Using "Height: 100Vh" for the Container, Vertical Scrollbar Appears

min-height 100vh creates vertical scrollbar even though content is smaller than viewport

Adding flex-grow seems to do the trick:

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-around;
}

https://jsfiddle.net/uxgaaccr/2/

Not sure why, but height: 100% on .wrapper doesn't seem to suffice, it needs flex-grow instead. I think there was some extra white-space coming from justify-content: space-around that was adding to the height. Not confident in my reasoning, but it seems to work...

100vh 'height' property attribute is producing vertical scrolling. How to fix it?

Scroll is contributed by border property , div default margin/ padding .

You can remove scroll by :

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

Child elements are not contained in viewport height even if parent's height is set to be `100vh`

All that's wrong is that the body element has a default margin of 8px, so this is adding 16px to the height.

To fix ie, you just need to set the margins to 0, so add this to the start of your CSS:

body { margin:0;}

Working Example:

body { margin:0;}

.parent{
  background: #64B5F6;
  height: 100vh;
  display: grid;
  grid-template-columns: 40% 60%;
}

.child1 {
  background: #42A5F5;
  height: 100%;
}

.child2{
  background: #FFEB3B;
  height: 100%;
}

.img1 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img2 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class='parent'>
  <div class='child1'>
    <img class='img1'src="https://images.unsplash.com/photo-1597594879431-8aecf7c2dd49?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="man image">
  </div>
  <div class='child2'>
    <img class='img2'src="https://images.unsplash.com/photo-1598505628759-67b9346af31c?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="man image">
  </div>
</div>

.box {
    width: 100vw;
    height: 100vh;
    max-width:100%;  /* added */
}