Почему не анимируется height:100%?

Question

[Maks]

Структура HTML:

<input type="checkbox">
<section>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam odio at reiciendis rem suscipit voluptatem eos maxime accusantium recusandae vero! Earum illum impedit nisi deleniti iusto amet voluptates quod facere dolor vero cumque possimus repellat. Incidunt eos ab reprehenderit voluptates totam suscipit ullam impedit perspiciatis mollitia harum dignissimos minus odit tempore quasi quia in eligendi aliquid quos hic voluptatibus magni!
</section>

CSS:

section {
    width: 200px;
    background: red;
    height: 0;
    transition: all .3s ease;
}
input:checked + section {
    height: 100%;
}

Пример на JsFiddle: jsfiddle.net/6kbx546L

Стоит transition, но анимирования нет. Но если заменить проценты на px - то анимация будет как положено.
Вопрос: Почему не анимируются проценты?

Если сделать обертку дивом и этому диву указать фиксированное значение (скажем 300px)- то анимация у section также будет нормальной. Но если я не знаю высоту section?

Answer 1

[lnked]

попробуйте так

Comments

[Maks]

Для моих целей подошло, спасибо.

Answer 2

[Александр Крупнов]

Процентное значение всегда относительно чего либо. Попробуйте через JS получать высоту section и присваивать значение этому же элементу section. Возможно есть более лучшее решение.