横並びの2つの要素の片方が折り返されないように固定する

どんなとき？

↓の画像みたいな感じにしたいとき。


HTMLとしては

<div class='header'>
  <h1 class='title'>Title</h1>
  <time class='publishedAt'>2020-12-25<time>
</div>

time は h1 が短くても常に右端にいて、折返しされないようにしたいが、横幅固定とか position: absolute; とかはしたくない 。 h1 は長ければ適当に折り返す。

どうやる？

他にもやり方ありそうだけどとりあえず次のようなCSSで実現できた。

.header {
  display: flex;
  .title {
    word-break: break-all;
    flex-grow: 1;
  }
  .publishedAt {
    flex-shrink: 0;
  }
}

flex-grow: 1;
で空きスペースは全て埋めるように .title が伸びて、
flex-shrink: 0;
で .publishedAt が折り返されたりはみ出したりしないようになるイメージ