CSS BUG: Overflow: hidden; leaves empty white space next to border (div inside div)

user_15675344 0
Viewed 173

I simply have a div inside another div with overflow: hidden and if you are in chrome then you will see whitespace around the border especially when zooming in and out, if you are in firefox it is less glitchy and there is only white space in the corners of the border. chrome screenshot / firefox screenshot

<style>
    .div1 {
        border: 10px solid purple;
        border-radius: 30px;
        height:300px;
        width:300px;
        overflow: hidden;
        position: relative;
    }
    .div2 {
        background: purple;
        position: absolute;
        height: 400px;
        width: 400px;
        top: -20px;
        left: -20px;
    }
</style>
<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
</body>

Note that I don't want an alternative way to achieve the above aesthetic but I need a proper solution while keeping the div inside a div, because my bigger project requires this structure and this code is simplified to showcase the bug. Thanks!

frontend overflow google-chrome css html
1 Answers

I've found a trick for it here it is: don't use background-color for the #outer instead, give background-color property to #inner and #inner2 and put your content inside inner2, now instead of a border, you can use box-shadow.

this way you can have both sharp edges and a border with a different color.

*,
*::before,
*::after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
}

#outer {
    height: 5rem;
    width: 10rem;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 0 0 2px black;
    margin: auto;
}

#inner {
    background-color: blue;
    height: 2rem;
    width: 100%;
}

#inner2 {
    height: 4rem;
    background-color: red;
    width: 100%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div id="outer">
    <div id="inner">
    </div>
    <div id="inner2"></div>
  </div>

</body>


</html>

user_131589720
Related