CSSのcalcで、width:100%からマイナスpx指定する

CSSでcalcがあるのを知ってましたが、使いどころがわからずに、放置していました。

例えば、こちらのサンプルのように、レスポンシブなどで、画像の幅は固定し、テキスト部分は伸縮する時に使えますね。

calcのサンプルはこちら

HTML

<div class="wrap">
  <div class="pht"><img src="https://placehold.jp/240x200.png"></div>
  <div class="text">テキストがはいります。</div>
</div>

CSS

calcで幅100%から画像とマージン分を引いているだです。

.wrap {
  width: 100%;
  display: flex;
}
.pht {
  width: 240px;
  margin-right: 20px;
}
.text {
  width: calc(100% - 260px);
}

こんなに便利なら、はやく試しておけばよかったです(-_-)