Процент высоты Div не работает должным образом

Question

Я придумал очень странное поведение. Я создал 3 divs с их высотой, записанной в процентах. Когда я тестирую их на своей собственной странице, они ведут себя так, как ожидалось, но когда я включаю их в другой контейнер, они теряют свою высоту.

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

HTML

<div id="mywrapper"> 
    <div class="box"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed nisi eget ligula egestas interdum vitae ornare metus. Quisque vitae sapien facilisis, sodales nibh in</p></div> 
    <div class="box"><p>Maecenas placerat libero at lorem pretium, sed condimentum diam condimentum. In eu scelerisque tellus. Cras sollicitudin cursus arcu vitae lacinia. Fusce pellentesque maximus pulvinar. Duis placerat varius augue, at sagittis nisi bibendum ve</p></div> 
    <div class="box"><p>urna viverra et.</p></div> 
</div> 

CSS

* { 
    margin:0; 
    padding:0; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
} 

#mywrapper { 
    background-color: #eee; 
    min-height: 100%; 
    height:auto !important; 
    height:100%;    
    overflow: hidden !important; 
    width: 100%; 
    padding-left: 10%; 
    padding-right: 10%; 
} 

.box { 
    z-index:10;   
    position:relative; 
    background: rgba(0,0,0,1); 
    height:45%; 
    width:30%; 
    margin-right: 2%; 
    margin-top: 2%; 
    float:left; 
    display: inline-block; 
} 

.box p { 
    color:#fff; 
} 

Normal Page

Внутри Контейнер

Answer 1

Их высота становится относительно контейнера. Вот почему они не ведут себя так, как раньше.

Answer 2

Я бы подумал об использовании дисплея: table & display: table-cell для родителя и детей соответственно. Таким образом, высота всех 3 будет определяться самой высокой ячейкой.

#mywrapper { 
display: table; 
table-layout: fixed; 
width: 100%; 
} 

.box { 
display: table-cell; 
vertical-align: top; 
width: 33.33%; 
background: black; 
} 

Чтобы предоставить контейнеру фиксированную высоту, просто дайте родительскому (#mywrapper) высоте. Непосредственные дочерние дети (.box), которые отображаются: table-cell, будут занимать высоту родительского, который отображается: table.