防止div溢出

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

＆＃13;

＆＃13;

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

    #orangepart{
        display: inline-block;

width:49%;
    overflow: scroll;

    }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>