CSS display flex 片側の横幅固定サンプル

flexを使っていて
片方の横幅を固定したつもりでも、可変になっていることがあったので
やり方をまとめてみました。

See the Pen CSS display flex 片側の横幅固定サンプル by takapen (@takapen) on CodePen.

サンプル1

固定したい方にwidth:100px;
可変の方にflex:1;

#div01 dl {
  margin-bottom: 10px;
  display: flex;
}
#div01 dt {
  width:100px;/* point */
  display: flex;
  justify-content: center;
  align-items: center;
  background: #daa;
}
#div01 dd {
  flex:1;/* point */
  padding: 10px;
  background: #aad;
}

サンプル2

固定したい方にflex-basis: 100px; flex-shrink:0;
可変の方にflex:1;

#div02 dl {
  margin-bottom: 10px;
  display: flex;
}
#div02 dt {
  flex-basis: 100px;/* point */
  flex-shrink:0;/* point */
  display: flex;
  justify-content: center;
  align-items: center;
  background: #daa;
}
#div02 dd {
  flex:1;/* point */
  padding: 10px;
  background: #aad;
}

サンプル3

固定したい方にwidth: 100px;
可変の方にwidth: calc(100% - 100px);

#div03 dl {
  margin-bottom: 10px;
  display: flex;
}
#div03 dt {
  width: 100px;/* point */
  display: flex;
  justify-content: center;
  align-items: center;
  background: #daa;
}
#div03 dd {
  width: calc(100% - 100px);/* point */
  padding: 10px;
  background: #aad;
}

どのやり方がいいんですかね..？
脳みそ的にはcalcを使ったほうがわかりやすいけど
修正する場所が増えるし
1か2のやり方の方がよさそうですね