title: How to prevent margin to overflow in CSS?
body: <p>In the following code I notice the last row overflow the parent container. I have tried to use <code>overflow: auto;</code> but this adds scrollbars. How can I avoid the overflow?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css"&gt;
  
  &lt;style&gt;
      #a { height: 33%}
      #b { height: 17%}
      #c { height: 50%}
  &lt;/style&gt;
  &lt;div class="container border border-warning" style="height: 400px"&gt;
    &lt;div id="a" class="row bg-primary m-2"&gt;A&lt;/div&gt;
    &lt;div id="b" class="row bg-secondary m-2"&gt;B&lt;/div&gt;
    &lt;div id="c" class="row bg-info m-2"&gt;C&lt;/div&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://codepen.io/anon/pen/PBLyZB" rel="nofollow noreferrer">https://codepen.io/anon/pen/PBLyZB</a></p>