Bild nimmt nicht die volle Höhe des Containers neben div mit dynamischem Text

Question

Ich stehe derzeit ein Problem beim Versuch, ein Bild mit voller Höhe neben einem div, das Text hat, der nicht behoben ist fit zu machen.

Ich habe versucht Einstellung Max-Breite, Max-Höhe bei 100% ohne Glück, auch mit Hintergrundbildern und kann immer noch keine Lösung finden.

Hier ist mein Markup:

<div class="col-xs-6 containerDivs"> 
    <div class="col-xs-8"> 
     <h2>LOREM IPSUM</h2>  
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do   
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
     veniam, quis nostrud exercitation ullamco laboris nisi u</p> 
     <a href="#"><i class="moreIcon white spinLeft"></i></a> 
    </div> 
    <div class="col-xs-4"> 
     <img src="img/image-1.jpg"> 
    </div> 
</div> 

mein CSS hier:

.containerDivs{   
     > div:first-child{ 
      background-color:grey;    
      padding: 20px; 
      h2{ 
       font-family: 'Lounge-Bold', Helvetica, sans-serif; 
       font-size: 30px;              
       letter-spacing: 6px;      
       margin-bottom: 30px; 
      } 
      h2,p{ 
       color: white; 
       text-transform: uppercase; 
      } 
      p{ 
       line-height: 1.8; 
       font-family: 'Lounge', Helvetica, sans-serif; 
       font-size: 16px;       
      } 
     } 
     > div:last-child{   

     } 

    } 

Hier ist, wie es jetzt in meinem Browser sucht:

Was Mir fehlt es, dass das Bild die volle Höhe der Spalte einnimmt, es ist ok wenn p Kunst des Bildes wird beschnitten, solange es die volle Höhe einnimmt.

Vielen Dank im Voraus!

Answer 1

Sie können Flexbox verwenden, um die zwei div auf der gleichen Höhe zu haben.

/* Add it to the parent */ 
.containerDivs{ 
    display: flex; 
} 

Über das img, wenn Sie es in voller Höhe zu übernehmen wollen, würde ich empfehlen Sie Hintergrund-Bild auf dem div zu verwenden:

.containerDivs>div:last-child{   
    background-image: url("path_to_your_image"); 
    background-size:cover; 
} 

Hier ist ein funktionierendes JsFiddle: DEMO