css - guia - flex-wrap

Div del ancho del fluido en relación con el hermano

Question

Sospecho que esto podría necesitar Flexbox (o simplemente sería mucho más fácil), pero tal vez alguien tenga una idea / solución. Tengo una estructura como esta:

<section>
  <div>Some Text Here</div>
  <div></div>
</section>

La sección es ancho: 100%. Quiero que el primer div (flotante a la izquierda) se extienda a diferentes anchos dependiendo del texto, y quiero que el segundo div tome el porcentaje que quede de la sección. Cada div probablemente contendrá varios otros divs flotando en el interior (y ellos a su vez usarán porcentajes para el ancho). es posible?

Editar: Ok, creo que el problema más grande es el hecho de que en el segundo div, tengo un div flotante con un% de ancho, pero su padre es un ancho automático ... por lo que no funcionará bien ¿verdad? Codepen

Answer 1

Puede hacer esto especificando un DIV como flotante izquierdo, y otro como automático (para que use el espacio restante)

div:first-child { /* div on the left, width as per content */
    float: left;
    width: auto;
    background-color: #777;
}
div:last-child { /* div on the right, uses remaining width */
    background-color: #77f;
    width: auto;
}

Compruebe esta demostración : http://jsfiddle.net/pQc3d/1/