◆ flex-grow, flex-shrink 使うときは
  ◆ width じゃなくて flex-basis の方を設定するか
  ◆ flex-basis に auto を設定する
◆ basis をもとに伸縮してくれる
これまで特に気にせず基本は width だったのですが 縮めるときは width だと困りました

<div class="parent" style="width: 300px; height: 200px; background: khaki;">
    <div class="left" style="background: beige;">Left</div>
    <div class="right" style="background: powderblue;">Right</div>
</div>

<style>
.parent{
    display: flex;
}
.left, .right{
    flex: 0 1;
    margin: 10px;
}
.left{
    width: 40%;
}
.right{
    width: 60%;
}
</style>

これだと

flex-basis-width-w

flex:none にすれば

flex-basis-width-w2

margin 分 はみ出てしまいます
これをいい感じに縮めてもらおうと flex: 0 1; を指定してるのですが 上のように必要以上に縮んでしまいます

そういえば width みたいなもので flex-basis というのがあったので こういうときに使えばいいのかも とやってみると

.left{
    flex-basis: 40%;
}
.right{
    flex-basis: 60%;
}

flex-basis-width-b

無事目的達成できました

追記

flex-basis を省略して 0 になっていたのが原因で width の幅じゃなくて内側要素に必要な最小幅から縮めようとしていたようです
flex-basis に auto をつければ width 指定でも同じ見た目にできました