Border set in vmin unit causes gap

Question

DESCRIPTION

I have a weird bug where the border causes a small gap between the content and the border itself when set using vmin units.

REPRODUCIBLE SNIPPET

resize the window to see it, as it only happens on some device viewports

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  width: 80%;
  height: 80%;
  border-right: 1vmin solid red;
}

.content {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: black;
}

PREMISES

I'm setting border with vmin unit to keep it consistent between any screen resolution
Elements should keep current structure (border on parent, background on child)
Both elements should have display: flex

PROBLEM

I suspect the problem stands on how the vmin value is being rounded into pixels, creating that additional pixel which can be seen in similar scenarios (where a child with the background highlights the gap).

WHAT I TRIED

By having display: tables instead of flex fixes the extra px, but this can't be an option as flex is needed
vw / vh or any viewport unit generate the same issue

SOLUTION

A solution for having a flexible border could be to simply set the .container:after with a width in percentage, height to 100% and a background-color instead of the border. This solution works perfectly fine, but it's not a scalable solution in case we require more than just a single border side (e.g. border-right).

CONCLUSION

So premised all this, is there perhaps some trick that can be applied directly to the border (or its element) to get around it?

I'm not concerned about finding the first solution that works; As presented, a solution exists already, so the question is based out of mere curiosity for writing better code.

user_10940544 · Answer

Try to use box-shadow instead.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  width: 80%;
  height: 80%;
  box-shadow: 1vmin 0 0 0 #f00;
}

.content {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: black;
}

box-shadow: 1vmin 0 0 0 #f00; for right border, box-shadow: 0 0 0 1vmin #f00; for full border.

EDIT:

Why the gap is disappear? I think it is because box-shadow is kind of background with some offset. So, the decimal pixel is on the end. I guess.

But keep in mind that it will act different as being said by @doğukan in the comment.

but box-shadow doesn't work like border. see the difference. with border: i.stack.imgur.com/gqgsD.png box-shadow: i.stack.imgur.com/2ZsrA.png if this is not a problem, box-shadow works fine.

user_10698741 · Answer

Just set a background to .container?

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  width: 80%;
  height: 80%;
  background-color: black;
  border-right: 1vmin solid red;
  border-left: 1vmin solid green;
  border-top: 1vmin solid blue;
  border-bottom: 1vmin solid orange;
}

.content {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: black;
}

Border set in vmin unit causes gap

2 Answers