How to set minimum column width to 100px with flex-shrink?

Question

css

1 bad implementation: https://jsfiddle.net/h1gznpqa/ (goes offscreen)
2 bad implementation https://jsfiddle.net/h1gznpqa/2/ (everything seems to be perfect, this is what I was trying to achieve, except that the minimum width is not 100 px, it is smaller for some reason) The
question is, is it possible to make the minimum left and right sidebars be 100px and if suddenly the central element does not have enough space, then the left and right block should narrow until will touch the text inside this block?
I know that in this case it's better to rebuild the layout and make transfers, but I'm just interested in learning.
those. in fact, you need to finish the implementation 2 so that the left and right columns have a minimum width of 100 px;
UPD : if we add min-width, then we will have everything go beyond the screen and shrink will stop working

Answer 1

Change the left and right plows from flex-basis to min-width

Answer 2

make a minimum width for the page https://jsfiddle.net/h1gznpqa/19/