Как сделать пущенное в ход отделение 100% высотой его родителя?

Чтобы высота #outer была основана на его содержимом, а высота #inner была основана на этом, сделайте оба элемента абсолютно позиционированными.

Более подробную информацию можно найти в спецификации для свойства css height , но, по сути, #inner должен игнорировать #outer height if # Высота outer равна auto , , если #outer не позиционируется абсолютно. Тогда высота #inner будет равна 0, , если только сам #inner не позиционируется абсолютно.

<style>
    #outer {
        position:absolute; 
        height:auto; width:200px; 
        border: 1px solid red; 
    }
    #inner {
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
    }
</style>

<div id='outer'>
    <div id='inner'>
    </div>
    text
</div>

Однако ... При абсолютном позиционировании #inner параметр float будет проигнорирован, поэтому вам нужно будет явно указать ширину для #inner и добавьте отступы в #outer , чтобы имитировать перенос текста, который, как я подозреваю, вам нужен. Например, ниже заполнение #outer - это ширина #inner +3. Удобно (поскольку все дело в том, чтобы получить высоту #inner до 100%), нет необходимости переносить текст под #inner , поэтому это будет выглядеть так же, как #inner размещен.

<style>
    #outer2{
        padding-left: 23px;
        position:absolute; 
        height:auto; 
        width:200px; 
        border: 1px solid red; 
    }
    #inner2{
        left:0;
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
   }
</style>

<div id='outer2'>
    <div id='inner2'>
    </div>
    text
</div>

Я удалил свой предыдущий ответ, так как он основывался на слишком многих неверных предположениях о вашей цели.