OverFlowProblem

HTML

<div id="Page2">

	<div class="button-container">
 	 <div class="left-container" style=" max-width: 80%;">ButtonWithAReallyLongNameButtonWithAReallyLongNameButtonWith	AReallyLongNameButtonWithAReallyLongNameButtonWithAReallyLongNameButtonWithAReallyLongNameButtonWithAReallyLongNameButtonWithAReallyLongNameButtonWithAReallyLongNameButtonWithAReallyLongNameButtonWithAReallyLongNameButtonWithAReallyLongNameButtonWithAReallyLongNameButtonWithAReallyLongNameButtonWithAReallyLongNameButtonWithAReallyLongNameButtonWithAReallyLongNameButtonWithAReallyLongNameButtonWithAReallyLongNameButtonWithAReallyLongNameButtonWithAReallyLongName
  </div>
  <div style="width: 20%;" class="right-container">picture</div>
</div>

CSS

#Page2{
    margin-top: 70px;
    
}
.button-container {
    min-width:320px;
}
.button-container > div {
  border: 1px solid gray;
  background-color: orange;
  max-width: 50%;
  padding: 8px;
  white-space: nowrap;
  overflow: hidden;
  box-sizing:border-box;
  text-overflow: ellipsis;
}
.left-container {
  float: left;
   height: 200px;
}
.right-container {
  float: right;
}