¿Cómo puedo tener dos columnas de ancho fijo con una columna flexible en el centro?

Estoy tratando de configurar un diseño de caja flexible con tres columnas donde las columnas izquierda y derecha tienen un ancho fijo, y la columna central se flexiona para llenar el espacio disponible.

A pesar de establecer dimensiones para las columnas, todavía parecen encogerse a medida que se encoge la ventana.

Alguien sabe cómo lograr esto?

Una cosa adicional que tendré que hacer es ocultar la columna derecha en función de la interacción del usuario, en cuyo caso la columna izquierda aún mantendría su ancho fijo, pero la columna central ocuparía el resto del espacio.

#container {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    max-width: 1200px;
}

.column.left {
    width: 230px;
}

.column.right {
    width: 230px;
    border-left: 1px solid #eee;
}

.column.center {
    border-left: 1px solid #eee;
}

<div id="container">
    <div class="column left">
        <p>Anxiety was a blog series that ran in the New York Times Opinion section from January 2012 to July 2013. It featured essays, fiction, and art by a wide range of contributors that explored anxiety from scientific, literary, and artistic perspectives.</p>
    </div>
    <div class="column center">
        <img src="http://i.imgur.com/60PVLis.png" width="100" height="100" alt="">
    </div>
    <div class="column right">
        Balint Zsako
        <br/> Someone’s Knocking at My Door
        <br/> 01.12.13
    </div>
</div>

Aquí hay un JSFiddle: http://jsfiddle.net/zDd2g/185/

En lugar de usar width(que es una sugerencia cuando se usa flexbox), puede usar lo flex: 0 0 230px;que significa:

• 0= no crezca (abreviatura de flex-grow)
• 0= no encoger (abreviatura de flex-shrink)
• 230px= comenzar en 230px(abreviatura de flex-basis)

lo que significa: siempre se 230px.

Ver violín , gracias @TylerH

Ah, y no necesitas el justify-contenty align-itemsaquí.

img {
    max-width: 100%;
}
#container {
    display: flex;
    x-justify-content: space-around;
    x-align-items: stretch;
    max-width: 1200px;
}
.column.left {
    width: 230px;
    flex: 0 0 230px;
}
.column.right {
    width: 230px;
    flex: 0 0 230px;
    border-left: 1px solid #eee;
}
.column.center {
    border-left: 1px solid #eee;
}

A pesar de establecer dimensiones para las columnas, todavía parecen encogerse a medida que se encoge la ventana.

Una configuración inicial de un contenedor flexible es flex-shrink: 1 . Es por eso que sus columnas se están reduciendo.

No importa qué ancho especifique ( podría serwidth: 10000px ), con flex-shrinkel ancho especificado se puede ignorar y se evita que los elementos flexibles desborden el contenedor.

Estoy tratando de configurar una caja flexible con 3 columnas donde las columnas izquierda y derecha tienen un ancho fijo ...

Deberá deshabilitar la reducción. Aquí hay algunas opciones:

.left, .right {
     width: 230px;
     flex-shrink: 0;
 }  

O

.left, .right {
     flex-basis: 230px;
     flex-shrink: 0;
}

O, según lo recomendado por la especificación:

.left, .right {
    flex: 0 0 230px;    /* don't grow, don't shrink, stay fixed at 230px */
}

7.2. Componentes de flexibilidad

Se alienta a los autores a controlar la flexibilidad usando la flextaquigrafía en lugar de sus propiedades de la mano directamente, ya que la taquigrafía restablece correctamente cualquier componente no especificado para acomodar usos comunes .

Más detalles aquí: ¿Cuáles son las diferencias entre base flexible y ancho?

Una cosa adicional que debo hacer es ocultar la columna derecha según la interacción del usuario, en cuyo caso la columna izquierda aún mantendría su ancho fijo, pero la columna central ocuparía el resto del espacio.

Prueba esto:

.center { flex: 1; }

Esto permitirá que la columna central consuma el espacio disponible, incluido el espacio de sus hermanos cuando se eliminan.

Violín revisado

La compatibilidad con los navegadores más antiguos puede ser una carga, así que ten cuidado.

Si eso no es un problema, adelante. Ejecute el fragmento. Ir a la vista de página completa y cambiar el tamaño. El centro se redimensionará sin cambios en los divs izquierdo o derecho.

Cambie los valores izquierdo y derecho para cumplir con sus requisitos.

Gracias.

Espero que esto ayude.

#container {
  display: flex;
}

.column.left {
  width: 100px;
  flex: 0 0 100px;
}

.column.right {
  width: 100px;
  flex: 0 0 100px;
}

.column.center {
  flex: 1;
  text-align: center;
}

.column.left,
.column.right {
  background: orange;
  text-align: center;
}

<div id="container">
  <div class="column left">this is left</div>
  <div class="column center">this is center</div>
  <div class="column right">this is right</div>
</div>