Держите divs от переполнения

Question

Как мне заставить эти два переполнения? Я пробовал почти все, поэтому я не знаю, куда идти отсюда. div с отмечены зеленым и оранжевым цветом.

#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

display: flex; Просто добавьте в контейнер из этих двух div. Если вы хотите, чтобы дети не растягивались, добавьте align-items: flex-start; к вашему контейнеру.

Answer 2

#greenpart{ 
 
    display: inline-block; 
 
width:49%; 
 
    overflow: scroll; 
 
    } 
 

 
    #orangepart{ 
 
     display: inline-block; 
 

 
width:49%; 
 
    overflow: scroll; 
 

 
    }

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

 
    test1 
 
      </div> 
 
      </div> 
 

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

Answer 3

             
  
 
   
 
    
#datoid { 
 
    width: 50%; 
 
    height: 100px; 
 
    float: left; 
 
    background-color: inherit; 
 
    overflow: scroll; 
 
} 
 

 
#stemplingerclass { 
 
    width: 50%; 
 
    height: 100px; 
 
    float: right; 
 
    background-color: inherit; 
 
    overflow: scroll; 
 
}
 
    
<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>