Space between border parent div and child div's

Question

I am getting white space between my parent div and child div when adding a border to the parent div. I have tried everything (overflow, (min) height/width, increasing border width) but nothing works. I have the same problem with images when.

Does someone know how I can fix this and why this is happening?

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

body,
html {
  margin: 0;
  padding: 0;
}

.container {
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

.big-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  background: white;
  border: 5px solid darkgreen;
  overflow: hidden;
  height: 100px;
  width: 100px;
}

.box {
  flex: 1 1 33%;
  min-height: 100%;
  min-width: 100%;
  background: black;
  color: white;
  border: none;
  overflow: hidden;
}

<div class="container">
  <div class="big-box">
    <div class="box">
      <h2>hello</h2>
    </div>
  </div>
</div>

Answer 1

Yes, I have come across this and I think it is related to fractions of a CSS pixel being interpreted in different ways when the system is mapping them to actual screen pixels, there being more than one screen pixel to a CSS pixel on many modern screens. The calculations of course vary on different zoom settings and so sometimes you can see the extra white and sometimes not depending on zoom level.

A practical, if hacky, way of getting round this is to give the parent the same background color as the child if that doesn't mess up other stuff in your styling.

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

body,
html {
  margin: 0;
  padding: 0;
}

.container {
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

.big-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  background: white;
  border: 5px solid darkgreen;
  overflow: hidden;
  height: 100px;
  width: 100px;
  background-color: black;
}

.box {
  flex: 1 1 33%;
  min-height: 100%;
  min-width: 100%;
  background: black;
  color: white;
  border: none;
  overflow: hidden;
}

<div class="container">
  <div class="big-box">
    <div class="box">
      <h2>hello</h2>
    </div>
  </div>
</div>

If that messes up your styling I suppose you could go one (hackier) step further and use linear-gradient backgrounds on the parent to give it a sort of black inner border of a (CSS) px or two and leave the rest as white.

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

body,
html {
  margin: 0;
  padding: 0;
}

.container {
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

.big-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  background: white;
  border: 5px solid darkgreen;
  overflow: hidden;
  height: 100px;
  width: 100px;
  background-image: linear-gradient(black 0 2px, transparent 2px calc(100% - 2px), black calc(100% - 2px) 100%), linear-gradient(to right, black 0 2px, white 2px calc(100% - 2px), black calc(100% - 2px) 100%);
}

.box {
  flex: 1 1 33%;
  min-height: 100%;
  min-width: 100%;
  background: black;
  color: white;
  border: none;
  overflow: hidden;
}

<div class="container">
  <div class="big-box">
    <div class="box">
      <h2>hello</h2>
    </div>
  </div>
</div>