Background color exceeds parent element setted with overflow hidden-CodePudding

I'm making an interactive eye which follows the mouse cursor. I've got some specific positions where the border of the eyes are overflowing the parent border limit.

The bug with my current code is here: I thought the bug is between the ball and eye CSS classes:

How can I solve this bug that appears at the bottom without changing the margins, height, width and top / left properties defined?

CodePudding user response：

I don't know if you asked this because of understanding questions, but I deleted some of your code and adjusted your eyes in the code. I hope I helped. I just cannot get it to flow in a row instead of a column :(. Here is the code:

.ball{
  width: 9px;
  height: 8px;
  background: #000;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 5px solid #64642d;
}
.eyes{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  width: 100vw;
  height: 100vh;
}

#eye-right{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;
  width: 27px;
  height: 29px;
}
#eye-left{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;
  width: 28px;
  height: 27px;
}
.eye{
  overflow: hidden;
  width: 31px;
  height: 31px;
  border-radius: 125% 0%;
  border: solid 1px currentColor;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

<div >
  <div >
    <div id="eye-left" >
      <div id="left-ball" >
        <div ></div>
      </div>
    </div>

    <div id="eye-right" >
      <div id="right-ball" >
        <div ></div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

I actually found out how to make it flow like a row. I rotated each part. Here is new code:

.ball{
  width: 9px;
  height: 8px;
  background: #000;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 5px solid #64642d;
}
.eyes{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  width: 100vw;
  height: 100vh;
  transform: rotate(-90deg);
}

#eye-right{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px;
  width: 27px;
  height: 29px;
}
#eye-left{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px;
  width: 28px;
  height: 27px;
}
.eye{
  overflow: hidden;
  margin: 10px;
  width: 31px;
  height: 31px;
  border-radius: 125% 0%;
  border: solid 1px currentColor;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

<div >
  <div >
    <div id="eye-left" >
      <div id="left-ball" >
        <div ></div>
      </div>
    </div>

    <div id="eye-right" >
      <div id="right-ball" >
        <div ></div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

run this code it will do it

.ball{
  width: 9px;
  height: 8px;
  background: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  border: 5px solid #64642d;
}
.eye{
  overflow: hidden;
  position: relative;
  display: inline-block;
  width: 31px;
  height: 31px;
  border-radius: 125% 0%;
  border: solid 1px currentColor;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.eyes{
  position: absolute;
  transform: translateY(-50%);
  width: 100%;
  height: 90%;
  text-align: center;
}
.centered {
  position: absolute;
  top: 317px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
}
#eye-right{
  margin: 4px 1px 2px 22px;
  width: 27px;
  height: 29px;
}
#eye-left{
  margin: 0px 30px 3px -1px;
  width: 28px;
  height: 27px;
}
.stablish{
  width: 30px;
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translate(-40%, -50%) rotate(-45deg);
}
#left-ball{
  top: 50%;
  left: 35%;
  transform: translate(-43%,-57%) rotate(-45deg);
  padding-left: 4px;
  height: 17px;
}
#right-ball{
  top: 50%;
  left: 50%;
  transform: translate(-40%,-90%) rotate(-45deg);
  margin-top: 4px;
  margin-left: -4px;
  height: 17px;
  width: 36px;
}

<!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" />
    <link rel="stylesheet" href="./css/style.css" />
    <title>Practice</title>
  </head>
  <body>
    <div >
      <div >
        <div id="eye-left" >
          <div id="left-ball" >
            <div  style="left: 49.2734%; top: 94.7467%"></div>
          </div>
        </div>
        <div id="eye-right" >
          <div id="right-ball" >
            <div  style="left: 49.2734%; top: 94.7467%"></div>
          </div>
        </div>
      </div>
    </div>
    <script src="./js/script.js"></script>
  </body>
</html>