title: How to keep div elements from overlapping parent div?
body: <p>I have tried setting overflow to hidden, but this cuts off the images that end up overlapping the parent div. I'd like them to be contained within the parent div without being cut off. What value should I adjust to achieve this?</p>
  
  <p><a href="https://jsfiddle.net/bLm9antL/1/" rel="nofollow noreferrer">Here is the fiddle.</a></p>
  
  <pre><code>body {
    font-family: Europa;
    margin: 0 auto;
  }
  
  .box {
    position: relative;
    width: 600px;
    height: 500px;
    border-radius: 20px;
    border: solid #6441a5;
    background:#6441a5;
  }
  
  div {
    padding: 10px;
    width: 100px;
    width: 100px;
  }
  
    div img {
    height: 100%;
    width: 100%;
    border-radius: 100px;
  }
  
  .results-wrap {
    height: 100%;
    position: absolute;
  }
  </code></pre>