Why Can't I See the Top and Right Corners?

Asked Oct 18 '21 at 13:50

Active Oct 18 '21 at 13:54

Viewed 28 times

Why can't I see the top and right corners of the div element in the example below:

.test {
  height: 100%;
  width: 100%;
  display: flex;
  position: fixed;
  border: 2px solid #ccc;
}

<div class="test"></div>

For some reason the border is only showing up on the top and left sides. Why is it so and how to fix it?

edited Oct 18 '21 at 13:54

amn

asked Oct 18 '21 at 13:50

Lester

1

Because 100% plus x is more than 100%, for any x > 0. – CBroe Oct 18 '21 at 13:52
(And you might need to eliminate the default body margin as well.) – CBroe Oct 18 '21 at 13:54
`body` has a padding. Also, `border-width` isn't included into the 100%. – Rickard Elimää Oct 18 '21 at 13:54
1

@CBroe body margin wont help here as 100% width + 2x 2px border are still more then 100%. `box-sizing: border-box;` will – tacoshy Oct 18 '21 at 13:54
`body` has 8px margin. please remove it. – Sato Takeru Oct 18 '21 at 13:55
1

@SatoTakeru body margin is not the problem here. and it is not necessarily 8px. Most browser UA have it set at 8px which equals then 16px. The added border width causes the overflow. – tacoshy Oct 18 '21 at 13:56
@SatoTakeru I set margin: -8px. Now I can see the right and bottom borders but not the top and left sides. :) – Lester Oct 18 '21 at 14:20
`body: margin: 0;` and `.test: box-sizing: border-box;` – Sato Takeru Oct 18 '21 at 14:42
1

May God bless you, Mister Takeru. Thank you so much. – Lester Oct 18 '21 at 14:50

0 Answers0