Posição: altura absoluta e dos pais?

Tenho alguns contêineres e seus filhos estão posicionados apenas absolutos / relativamente. Como definir a altura dos contêineres para que seus filhos fiquem dentro deles?

Aqui está o código:

HTML

<section id="foo">
    <header>Foo</header>
    <article>
        <div class="one"></div>
        <div class="two"></div>
    </article>
</section>    

<div style="clear:both">Clear won't do.</div>
<!-- I want to have a gap between sections here -->

<section id="bar">
    <header>bar</header>
    <article>
        <div class="one"></div><div></div>
        <div class="two"></div>
    </article>
</section>  

CSS

article {
    position: relative;
}

.one {
    position: absolute;
    top: 10px;
    left: 10px;
    background: red;
    width: 30px;
    height: 30px;
}

.two {
    position: absolute;
    top: 10px;
    right: 10px;
    background: blue;
    width: 30px;
    height: 30px;
}

Aqui está um jsfiddle. Quero que o texto da "barra" apareça entre 4 quadrados, não atrás deles.

http://jsfiddle.net/Ht9Qy/

Alguma solução fácil?

Observe que não sei a altura dessas crianças e não consigo definir a altura: xxx para contêineres.

Se eu entendi o que você está tentando fazer corretamente, então não acho que isso seja possível com CSS mantendo as crianças absolutamente posicionadas.

Os elementos absolutamente posicionados são completamente removidos do fluxo de documentos e, portanto, suas dimensões não podem alterar as dimensões de seus pais.

Se você realmente tivesse que atingir esse efeito enquanto mantinha os filhos como position: absolute, poderia fazer isso com JavaScript, encontrando a altura dos filhos posicionados absolutamente após a renderização e usando isso para definir a altura do pai.

Alternativamente, apenas use float: left/ float:righte as margens para obter o mesmo efeito de posicionamento enquanto mantém os filhos no fluxo do documento, você pode usar overflow: hiddenno pai (ou qualquer outra técnica de clearfix) para fazer com que sua altura se expanda para a de seus filhos.

article {
    position: relative;
    overflow: hidden;
}

.one {
    position: relative;
    float: left;
    margin-top: 10px;
    margin-left: 10px;
    background: red;
    width: 30px;
    height: 30px;
}

.two {
    position: relative;
    float: right;
    margin-top: 10px;
    margin-right: 10px;
    background: blue;
    width: 30px;
    height: 30px;
}

Aqui está minha solução alternativa.
Em seu exemplo, você pode adicionar um terceiro elemento com "mesmos estilos" de .um & .two elementos, mas sem a posição absoluta e com visibilidade oculta:

HTML

<article>
   <div class="one"></div>
   <div class="two"></div>
   <div class="three"></div>
</article>

CSS

.three{
    height: 30px;
    z-index: -1;
    visibility: hidden;
}

Esta é uma resposta tardia, mas olhando o código-fonte, percebi que quando o vídeo está em tela cheia, a classe "mejs-container-fullscreen" é adicionada ao elemento "mejs-container". Assim, é possível alterar o estilo com base nesta classe.

.mejs-container.mejs-container-fullscreen {
    // This rule applies only to the container when in fullscreen
    padding-top: 57%;
}

Além disso, se você deseja tornar seu vídeo MediaElement fluido usando CSS, abaixo está um ótimo truque de Chris Coyier: http://css-tricks.com/rundown-of-handling-flexible-media/

Basta adicionar ao seu CSS:

.mejs-container {
    width: 100% !important;
    height: auto !important;
    padding-top: 57%;
}
.mejs-overlay, .mejs-poster {
    width: 100% !important;
    height: 100% !important;
}
.mejs-mediaelement video {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100% !important;
    height: 100% !important;
}

Espero que ajude.

Este tipo de problema de layout pode ser resolvido com o flexbox agora, evitando a necessidade de conhecer alturas ou controlar o layout com posicionamento absoluto, ou flutuadores. A principal questão de OP era como fazer um pai conter filhos de altura desconhecida, e eles queriam fazer isso dentro de um determinado layout. Definir a altura do contêiner pai para "ajustar o conteúdo" faz isso; usando "display: flex" e "justify-content: space-between" produz o layout de seção / coluna que acho que o OP estava tentando criar.

<section id="foo">
    <header>Foo</header>
    <article>
        <div class="main one"></div>
        <div class="main two"></div>
    </article>
</section>    

<div style="clear:both">Clear won't do.</div>

<section id="bar">
    <header>bar</header>
    <article>
        <div class="main one"></div><div></div>
        <div class="main two"></div>
    </article>
</section> 

* { text-align: center; }
article {
    height: fit-content ;
    display: flex;
    justify-content: space-between;
    background: whitesmoke;
}
article div { 
    background: yellow;     
    margin:20px;
    width: 30px;
    height: 30px;
    }

.one {
    background: red;
}

.two {
    background: blue;
}

Eu modifiquei o violino do OP: http://jsfiddle.net/taL4s9fj/

css-tricks no flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Esta é outra resposta tardia, mas descobri uma maneira bastante simples de colocar o texto "barra" entre os quatro quadrados. Aqui estão as alterações que fiz; Na seção bar, envolvi o texto "bar" dentro de uma tag center e div.

<header><center><div class="bar">bar</div></center></header>

E na seção CSS eu criei uma classe "bar" que é usada na tag div acima. Depois de adicionar isso, o texto da barra foi centralizado entre os quatro blocos coloridos.

.bar{
    position: relative;
}