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

Question

[webe]

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

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

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

Answer 1

[CODALSD]

Поменяйте для левого и правого плока значение flex-basis на min-width

Comments

[webe]

CODALSD https://jsfiddle.net/h1gznpqa/7/

Поменял и вернулся к первой проблеме. (заезжает за экран)
Как я понял нереально сделать то что я хочу и это невыполнимо в Flexbox

[CODALSD]

@webe

.first {
  flex-grow: 1;
  background: gray;
  flex-shrink: 1;
  max-width: 100px;
  flex-basis:100%;
 
}

.middle {
  flex-grow: 2;
  background: green;
  flex-shrink: 1;
  flex-basis: 100%;
 
}

.last {
  flex-grow: 1;
  background: pink;
  flex-shrink: 1;
    max-width: 100px;
    flex-shrink:1;
    flex-basis:100%;
    
}

[webe]

CODALSD, круто, спасибо, не додумался)

Answer 2

[tyzberd]

сделайте минимальную ширину для страницы https://jsfiddle.net/h1gznpqa/19/