Div высота не растягивается

Question

Это дует мой разум. У меня есть обертка div и 2 divs внутри нее, один из divs ее высота 100%, но не растягивается, чтобы соответствовать оболочке.

Вот JSFIDDLE

HTML-:

<div class="wrapper"> 

<div class="inner_left"> 
Just<br />Some<br />Words 
</div> 

<div class="inner_right"> 
Anything 
</div> 

</div> 

CSS-:

.wrapper { 
    width:auto !important; 
    height:auto !important; 
    margin:auto; 
    float:left; 
    padding:0; 
    background-color:#ccc; 
} 
.inner_left { 
    background-color:#f0f0f0; 
    width:270px; 
    height:auto !important; 
    border:1px solid #666; 
    float:left; 
    margin:auto; 
    padding:10px; 
    text-align:center; 
} 
.inner_right { 
    background-color:#f0f0f0; 
    width:200px; 
    height:100%; 
    border:1px solid #666; 
    float:right; 
    margin:auto; 
    padding:10px; 
    text-align:center; 
} 

мне нужно DIV (inner_right) на Автоподгонка высоту обертка. Поэтому, когда высота обертки сжимается или растягивается, этот div растягивается до максимальной высоты обертки.

Кто-нибудь знает, почему мой код не работает? Цените любую помощь.

Answer 1

Вот решение, использующее display:table и display:table-cell

.wrapper { 
 
    display: table; 
 
    width: 100%; /* whatever you want */ 
 
    padding: 0; 
 
    background-color: #ccc; 
 
} 
 
.wrapper > div { 
 
    display: table-cell; 
 
    border: 1px solid #666; 
 
    background-color: #f0f0f0; 
 
    padding: 10px; 
 
    text-align: center; 
 
} 
 
.inner_left { 
 
    width: 270px; 
 
} 
 
.inner_right { 
 
    width: 200px; 
 
}

<div class="wrapper"> 
 
    <div class="inner_left">Just 
 
    <br />Some 
 
    <br />Words</div> 
 
    <div class="inner_right">Anything</div> 
 
</div>

Answer 2

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

Answer 3

попытаться установить высоту 100% для всего документа:

html,body { 
    height: 100%; 
} 

и для класса-оболочки:

.wrapper { 
    width:auto !important; 
    height: 100%; 
    margin:auto; 
    float:left; 
    padding:0; 
    background-color:#ccc; 
} 

fiddle