Rellenar el ancho restante de un contenedor con CSS

En un escenario donde tienes un encabezado con tres elementos dispuestos en una fila, el El objetivo es que el elemento central ocupe el espacio restante dentro del encabezado. Para lograr esto, la combinación de visualización de bloques en línea y la función calc() en CSS resulta efectiva.

La solución de código

La estructura HTML proporcionada consta de un encabezado que contiene una imagen, un elemento central con texto y un elemento derecho. Para manipular su diseño, aplicamos CSS de la siguiente manera:

header {
  background: red;
}

#middle {
  background: orange;
  display: inline-block;
}

#right {
  background: green;
  display: inline-block;
  width: calc(100% - 100px);
}

Explicación

• Bloque en línea: Mostrar elementos como bloques en línea garantiza que permanezcan en la misma línea y se comporten como un bloque elementos, lo que permite ajustes de ancho y alto.
• calc() Función: Esta función realiza operaciones matemáticas en valores CSS. En este caso, calculamos el ancho restante restando el ancho fijo del elemento izquierdo (100px) del 100%.

El resultado de este código es que el elemento del medio se estira para llenar el espacio restante. en el encabezado, acomodando su contenido mientras el elemento derecho mantiene su ancho de 100px.

Alternativa Solución

Si prefiere tener un espacio entre los divs, puede modificar el CSS estableciendo el tamaño de fuente del elemento exterior (encabezado) en 0:

header {
  font-size: 0;
  ...
}