Posición: ¿altura absoluta y parental?

Tengo algunos contenedores y sus hijos solo están en posición absoluta / relativa. ¿Cómo configurar la altura de los contenedores para que sus hijos estén dentro de ellos?

Aquí está el 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;
}

Aquí hay un jsfiddle. Quiero que el texto de la "barra" aparezca entre 4 cuadrados, no detrás de ellos.

http://jsfiddle.net/Ht9Qy/

¿Alguna solución fácil?

Tenga en cuenta que no sé la altura de estos niños y no puedo establecer la altura: xxx para contenedores.

Si entiendo lo que está tratando de hacer correctamente, entonces no creo que esto sea posible con CSS mientras mantiene a los niños en una posición absoluta.

Los elementos absolutamente posicionados se eliminan por completo del flujo de documentos y, por lo tanto, sus dimensiones no pueden alterar las dimensiones de sus padres.

Si realmente tuviera que lograr este efecto mientras mantiene a los niños como position: absolute, puede hacerlo con JavaScript encontrando la altura de los niños absolutamente posicionados después de que se hayan renderizado, y usándolo para establecer la altura del padre.

Alternativamente, solo use float: left/ float:righty márgenes para obtener el mismo efecto de posicionamiento mientras mantiene a los hijos en el flujo del documento, luego puede usar overflow: hiddenen el padre (o cualquier otra técnica de corrección clara) para hacer que su altura se expanda a la de sus hijos.

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;
}

Aquí está mi solución alternativa.
En su ejemplo, puede agregar un tercer elemento con "los mismos estilos" de .uno y .dos elementos, pero sin la posición absoluta y con visibilidad 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 es una respuesta tardía, pero al mirar el código fuente, noté que cuando el video está en pantalla completa, la clase "mejs-container-fullscreen" se agrega al elemento "mejs-container". Por tanto, es posible cambiar el estilo en función de esta clase.

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

Además, si desea que su video de MediaElement sea fluido usando CSS, a continuación se muestra un gran truco de Chris Coyier: http://css-tricks.com/rundown-of-handling-flexible-media/

Simplemente agregue esto a su 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 ayude.

Este tipo de problema de diseño se puede resolver ahora con flexbox, evitando la necesidad de conocer alturas o controlar el diseño con posicionamiento absoluto o flotadores. La pregunta principal de OP era cómo hacer que un padre contuviera niños de altura desconocida, y querían hacerlo dentro de un diseño determinado. Establecer la altura del contenedor principal en "fit-content" hace esto; el uso de "display: flex" y "justify-content: space-between" produce el diseño de sección / columna que creo que el OP estaba tratando de crear.

<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;
}

Modifiqué el violín del OP: http://jsfiddle.net/taL4s9fj/

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

Esta es otra respuesta tardía, pero descubrí una forma bastante simple de colocar el texto de la "barra" entre los cuatro cuadrados. Estos son los cambios que hice; En la sección de la barra, envolví el texto de la "barra" dentro de un centro y etiquetas div.

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

Y en la sección CSS creé una clase "bar" que se usa en la etiqueta div anterior. Después de agregar esto, el texto de la barra se centró entre los cuatro bloques de colores.

.bar{
    position: relative;
}