Как установить размеры от размеров родителя у которого их ещё нет?

Question

[copal]

css дается мне не просто и поэтому его изучение я воздвиг в ранг хобби. Вот проблемный код на codepen, который на словах можно описать примерно так - есть контейнер (.container) у которого ширина 100% и высота auto, так как она должна быть такой, какой её будут задавать дети. В основном контейнере есть два контейнера левый и правый (.left, .right), у каждого ширина 50%, высота первого-левого inherit, у второго 50px.
Первый вопрос - почему не видно первого-левого контейнера? Это из-за того что в момент его формирования у .container ещё нет высоты, которая задается только вторым-правым чилдом?
Второй вопрос - как сделать чтобы эта схема заработала при таких условиях?

Answer 1

[AlexRas]

height: inherit не будет работать если у родителя не задано правило height - задай например родителю height: 300px, тогда .left тоже станет 300px

Comments

[copal]

а если .left указать значение не inherit, а 100%, то можно как-то сделать чтобы он эти 100% брал от родителя .container, у которого height auto?

[AlexRas]

Нет, используй display: table для родителей и display: table-cell для .left .right

Answer 2

[Дмитрий Христоев]

codepen.io/anon/pen/BjYmze

Comments

[copal]

а есть альтернатива flex? А то он даже ie9 не поддерживается..

[Дмитрий Христоев]

copal: ну так вы же не указали в чем оно должно работать. альтернативы не знаю, я на ие 9 забил, у меня последний проект почти на 50% на flex работает

[Сергей delphinpro]

copal: ie9 сам уже не поддерживается :)
а вообще есть полифил https://github.com/10up/flexibility

[copal]

Сергей: полефилы это прошлое, страшное прошлое с которым ещё не начали бороться. В моем случаи бесполезен.