Как я могу иметь два столбца фиксированной ширины с одним гибким столбцом в центре?

Несмотря на настройку размеров столбцов, они все еще сжимаются, когда окно сжимается.

Первоначальная настройка контейнера flex flex-shrink: 1. Вот почему ваши столбцы сокращаются.

Не имеет значения, какую ширину вы указываете (это может быть width: 10000px), при flex-shrink указанную ширину можно игнорировать и гибкие элементы предотвращают переполнение контейнера.

Я пытаюсь настроить flexbox на 3 столбца, где левый и правый столбцы имеют фиксированную ширину...

Вам нужно отключить сжатие. Вот несколько вариантов:

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

ИЛИ

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

ИЛИ, как рекомендовано спецификацией:

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

7.2. Компоненты Гибкость

Авторы рекомендуют контролировать гибкость с помощью сокращения flexа не с его прямыми свойствами непосредственно, как сокращенное правильно сбрасывает любые неуказанные компоненты для размещения common использует.

Подробнее здесь: В чем разница между гибким основанием и шириной?

Еще одна вещь, которую мне нужно сделать, это скрыть правый столбец на основе взаимодействия с пользователем, и в этом случае левый столбец сохранит свою фиксированную ширину, но центральный столбец заполнит остальную часть пространства.

Попробуйте следующее:

.center { flex: 1; }

Это позволит центральному столбцу использовать доступное пространство, в том числе пространство его братьев и сестер, когда они удаляются.

Пересмотренная скрипта

Совместимость со старыми браузерами может быть перетаскиванием, поэтому имейте в виду.

Если это не проблема, тогда вперед. Запустите фрагмент. Перейдите в полноэкранное представление и измените размер. Центр изменит размер без изменений в левом или правом div.

Измените значения влево и вправо, чтобы соответствовать вашим требованиям.

Спасибо.

Надеюсь это поможет.

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