Keep divs from overflowing

Question

How do I keeps these two from overflowing? I have tried almost everything so i don't know where to go from here. divs are marked with green and orange.

#stemplingerclass {
    clear: both;
    max-width: 100%;

}

#datoid 
{

   clear: both;
   max-width: 100%;
}

<div class="col-sm-10">
   <div class="col-md-3 col-sm-3 col-xs-10 text-center" style="background-color: green;" >
         <div id="datoid">


         </div>
      </div>

       <div class="col-md-7 col-sm-7 col-xs-10" style="background-color: orange;">
         <div id="stemplingerclass">

         </div>
       </div>
   </div>

Answer 1

Just add display: flex; to container of these two divs. If you want children not to stretch also add align-items: flex-start; to you container.