3 divs dinámicos dentro de un div principal con tamaño fijo - html, css

Estoy teniendo algunos problemas aquí, estoy tratando decree tres divs con ancho variable dentro de un div padre de ancho fijo. ¿Hay alguna forma de hacer que los divs se ajusten según la cantidad de espacio que haya allí? Básicamente, los tres divs tendrán un tamaño variable y necesitan llenar el div padre. Los divs también necesitan estar en la misma línea. La altura no es un problema.

Algo como esto:

<div id="parent">
<div></div>
<div></div>
<div></div>
</div>

Respuestas

¡Flexbox al rescate!

Para este ejemplo, utilicé justify-content: space-between, pero hay muchas opciones diferentes.

Maravillosa descripción de flexbox

#parent {
width: 300px;
background-color: orange;
display: flex;
justify-content: space-between;
}

.grow {
flex-grow: 1;
background-color: yellow;
}

<div id="parent">
<div>One</div>
<div class="grow">Two</div>
<div>Three</div>
</div>

Hay varias formas de hacerlo. Lo más fácil probablemente sería:

#parent {
display: table-row;
}
#parent div {
display: table-cell;
}

Esto hará que los elementos se comporten como una tabla HTML. (También puedes usar una tabla para facilitar las cosas).

Puedes usar algunas reglas CSS para lograr el comportamiento que estás describiendo. Aquí hay un violín: https://jsfiddle.net/sfmj4ca8/1/

• max-width: 33%; asegura que los 3 divs ocuparán a lo sumo 99% de ancho
• display: inline-block; Hace que los divs aparezcan en línea.

¿Qué tal doung así?

div#parent{
border: 1px solid gray;
width: 400px;
margin: 0 auto;
height: 200px;
padding: 0;
}
div#parent > div{
border: 1px solid gray;
width: 32%;
margin: 5px auto;
display: inline-block;
height: 150px;
}

<div id="parent">
<div></div>
<div></div>
<div></div>
</div>