Html 子 div 在父 div 中溢出

.viewBlocks {
    text-align: center;
    float: right;
    height: 700px;
    width: 190px;
    border: 1px solid black;
    background-color: darkgray;
    /* Use this and the children will be positioned relatively within this element*/
    position: relative;
}
.box {
    /* Define the placement here*/
     right: 0;
    top: 0;
    position: absolute;
    /* Change this to 100% if you want the element to fill its parent's width*/
    width: 100%; 
    height: 250px;
    background-color: #f1f1f1;
    border: 1px solid #d3d3d3;
    border-radius: 5px;
    resize: both;
    overflow: auto;
    z-index: 1;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
  
.box h2 {
    margin: 0;
    padding: 10px;
}

    <div class="viewBlocks">
    <!-- Class box -->
      <div id="box-container">
        <div class="box">
          <h2>Class</h2>
          <input class="class-name-form">
          <button class="class-name-btn" disabled>Set Class Name</button>
          <button disabled>Add Method</button>
          <button class="add-variable" disabled>Add instance variable</button>
        </div>
      </div>
      <!-- End Class Box -->
    
    </div>