Изображение не принимает полную высоту контейнера рядом с div с динамическим текстом

Question

В настоящее время я сталкиваюсь с проблемой при попытке подогнать изображение на полную высоту рядом с элементом div с текстом, который не зафиксирован.

Я попытался установить max-width, max-height на 100% без удачи, также с фоновыми изображениями и все еще не могу найти решение.

Вот моя разметка:

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

Вот мой CSS:

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

        }

    }

Вот как это выглядит в моем браузере прямо сейчас:

Так что мне не хватает, чтобы изображение занимало всю высоту столбца, это нормально, если часть изображения обрезается, если она занимает полную высоту.

Заранее спасибо!

Answer 1

Вы можете использовать Flexbox, чтобы два div на одной высоте.

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

Что касается IMG, если вы хотите, чтобы он занимал полную высоту, я бы порекомендовал вам использовать background-image на div:

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

Вот рабочий JsFiddle: DEMO