How to control the div within the div?

Hover the mouse on the blue box; the blue box will rotate 170 degrees but it overlaps the parent div. I want to rotate the blue box without overlapping the parent div.

.box {
  width:250px;
  height:250px;
  background:red;
}
.box_inside {
  position:absolute;
  width:250px;
  height:250px;
  background:blue;
  transition:all 0.7s linear;
}
.box_inside:hover {
  -ms-transform: rotate(170deg);
  -webkit-transform: rotate(170deg);
  transform: rotate(170deg);
}

<div class="box">
  <div class="box_inside"> </div>
</div>