◆ flex-grow, flex-shrink 使うときは width じゃなくて flex-basis の方を設定する
◆ 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

無事目的達成できました