<h2 id="he5e8b32904">どんなとき？</h2><p>↓の画像みたいな感じにしたいとき。<br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:3efc8e1b-5d0d-4ea4-82dd-4f4fa7865862/service/m4tsunext/media/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202020-12-25%2022.54.17.png" alt=""><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:3efc8e1b-5d0d-4ea4-82dd-4f4fa7865862/service/m4tsunext/media/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202020-12-25%2022.58.21.png" alt=""><br>HTMLとしては</p><pre><code>&lt;div class='header'&gt;
  &lt;h1 class='title'&gt;Title&lt;/h1&gt;
  &lt;time class='publishedAt'&gt;2020-12-25&lt;time&gt;
&lt;/div&gt;</code></pre><p><br><code>time</code>  は <code>h1</code> が短くても常に右端にいて、折返しされないようにしたいが、横幅固定とか <code>position: absolute; </code> とかはしたくない 。 <code>h1</code>  は長ければ適当に折り返す。<br></p><h2 id="haafc3b1244">どうやる？</h2><p>他にもやり方ありそうだけどとりあえず次のようなCSSで実現できた。</p><pre><code>.header {
  display: flex;
  .title {
    word-break: break-all;
    flex-grow: 1;
  }
  .publishedAt {
    flex-shrink: 0;
  }
}</code></pre><p><code>flex-grow: 1;</code><br>で空きスペースは全て埋めるように <code>.title</code>    が伸びて、<br><code>flex-shrink: 0;</code> <br>で <code>.publishedAt</code>   が折り返されたりはみ出したりしないようになるイメージ<br></p>

CSS の記事一覧

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