Como posso ter duas colunas de largura fixa com uma coluna flexível no centro?

Estou tentando configurar um layout de caixa flexível com três colunas em que as colunas esquerda e direita têm uma largura fixa e a coluna central flexiona para preencher o espaço disponível.

Apesar de configurar as dimensões das colunas, elas ainda parecem encolher à medida que a janela diminui.

Alguém sabe como fazer isso?

Outra coisa que precisarei fazer é ocultar a coluna da direita com base na interação do usuário. Nesse caso, a coluna da esquerda ainda manteria sua largura fixa, mas a coluna central preencheria o restante do espaço.

#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>

Aqui está um JSFiddle: http://jsfiddle.net/zDd2g/185/

Em vez de usar width(o que é uma sugestão ao usar o flexbox), você pode usar o flex: 0 0 230px;que significa:

• 0= não cresça (abreviação de flex-grow)
• 0= não encolher (abreviação de flex-shrink)
• 230px= iniciar às 230px(abreviação de flex-basis)

o que significa: sempre seja 230px.

Veja violino , obrigado @TylerH

Ah, e você não precisa do justify-contente align-itemsaqui.

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

Apesar de configurar as dimensões das colunas, elas ainda parecem encolher à medida que a janela diminui.

Uma configuração inicial de um contêiner flexível é flex-shrink: 1. É por isso que suas colunas estão encolhendo.

Não importa qual largura você especificar ( poderia serwidth: 10000px ), com flex-shrinka largura especificada pode ser ignorada e os itens flexíveis são impedidos de transbordar o contêiner.

Estou tentando configurar um flexbox com 3 colunas onde as colunas esquerda e direita têm uma largura fixa ...

Você precisará desativar o encolhimento. Aqui estão algumas opções:

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

OU

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

OU, conforme recomendado pela especificação:

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

7.2 Componentes de flexibilidade

Os autores são incentivados a controlar a flexibilidade usando a flexabreviação, em vez de diretamente com suas propriedades, pois a redefinição redefine corretamente qualquer componente não especificado para acomodar usos comuns .

Mais detalhes aqui: Quais são as diferenças entre base flexível e largura?

Outra coisa que preciso fazer é ocultar a coluna da direita com base na interação do usuário. Nesse caso, a coluna da esquerda ainda manteria sua largura fixa, mas a coluna central preencheria o restante do espaço.

Tente o seguinte:

.center { flex: 1; }

Isso permitirá que a coluna central consuma o espaço disponível, incluindo o espaço de seus irmãos quando eles forem removidos.

Fiddle revisado

A compatibilidade com navegadores mais antigos pode ser uma chatice, por isso é aconselhável.

Se isso não for um problema, vá em frente. Execute o trecho. Vá para a visualização de página inteira e redimensione. O Center será redimensionado sem alterações nas divs esquerda ou direita.

Altere os valores esquerdo e direito para atender às suas necessidades.

Obrigado.

Espero que isto ajude.

#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>