防止div缠绕在相邻的div周围

Question

I have an outer div and 2 inner divs - one left-alignd and another is right next to it. The issue I am having is that the left div is shorter then the right and then right wraps around the left.

Below is my html and CSS:

<div id='green'>
  <div id="orange">test</div>
  <div id="red">
     Effects<br/>

        Add Class<br/>
     Color Animation<br/>
   Easing<br/>
  Effect<br/>
   Hide<br/>
        Remove Class  
       Show
     Switch Class
    Toggle
   Toggle Class
    </div>
</div>

and here is CSS:

#green {
  padding-top: 0.75em;
  padding-bottom: 0.25em;
  padding-right: 1em;
  overflow: hidden;
  border:20px solid green;
}

#orange {
  width:185px;
  border:10px solid orange;
  float:left;
}

#red {
  border:5px solid red;
  width: 100%;
  display: block;
}

My question is how can I prevent the right div from wrapping around the left? Preferable without setting a margin on the right div.

I also want the red div to always be on the right of the orange div, never going under it or wrapping around it, even if the page is resized or if the page is viewed on a mobile browser

Answer 1

You can use flexbox for this. Using the following changes to your CSS above:

#green{
  display: flex;
  align-content: top;
  padding-top: 0.75em;
  padding-bottom: 0.25em;
  padding-right: 1em;
  overflow: hidden;
  border:20px solid green;
}


#orange{
  align-self:flex-start;
  width: 185px;
  border:10px solid orange;
}

#red{
  width: 100%;
  border:5px solid red;
}

If you want #orange to be the same height as #red, remove align-self: flex-start

Demo: http://codepen.io/anon/pen/YwOjyP

Answer 2

I got it working by adding display: inline-flex; to #green .

Look: https://jsfiddle.net/4k1ohc10/

By the way, you didn't ask for a specific browser, so you can check this page: http://caniuse.com/#feat=flexbox