症状

Electron/1.8.7, Chrome/59.0.3071.115でwidthの値が指定した値より小さくなってしまう現象に遭遇していました.

この現象のせいで要素が隠れてしまうバグが発生していました.

小さくなってしまうだけなら反映されてないだけだと納得出来るのですが, Chromeの開発者ツールで選択された値より計算された値が小さくなってしまっていたので混乱していました.

この要素にはpaddingもmarginも存在せず. box-sizingを開発者ツールで解除してみても同じくズレました. スクロールバーは横幅70pxも存在しません.

とりあえず大きめの値を設定してはみ出しを回避することはできますが, それでは原因がわからない.

min-widthを設定すれば小さくならないのですが, min-widthとmax-widthを両方設定するのは敗北感あります.

原因

色々調べたら以下のページを見つけました.

HTML - CSSでWidthをpx指定しているのに、指定サイズより幅が小さくなる(92815)｜teratail

原因はflex-shrink - CSS: カスケーディングスタイルシート | MDNを0に指定していないことでした.

これを0に指定しないと, 他の要素が膨らむと自動的に要素が縮小されてしまうということですね.

そういった情報は開発者ツールのどこにも書かれていなかったので大変混乱しました. flexと拡大可能要素は気をつけて使いましょうという話でした.