Как задать минимальную ширину колонкам в 100px вместе с flex-shrink?

1 неудачная реализация: https://jsfiddle.net/h1gznpqa/ (заходит за область экрана)
2 неудачная реализация https://jsfiddle.net/h1gznpqa/2/ (вроде бы все идеально, этого я и добивался, за исключением того что минимальная ширина не является 100 px, она почему-то меньше)

Вопрос, можно ли сделать так, что бы минимальная левого и правого сайдбара была 100px и если вдруг центральному элементу не хватает места, то левый и правый блок должен сужаться до тех пор пока не каснется текста внутри этого блока?
Знаю что в этом случае лучше сделать перестроение лейаута и сделать переносы, но я просто в качесвте обучения интересуюсь.

т.е. по сути нужно допилить 2 реализацию так, что бы левая и правая колонка имела минимальную ширину в 100 px;
UPD: если бы добавим min-width, тогда у нас будет все заезжать за экран и shrink перестанет работать