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;
}

<div class="container">
   <div class="content" />
</div>

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.

Answer 1

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;
}

<div class="container">
   <div class="content" />
</div>

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.

Answer 2

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;
}

<div class="container">
   <div class="content" />
</div>