Scribble at 2020-08-07 18:09:21 Last modified: 2020-08-07 18:16:41

いま古い記事のソースやスタイルを調整しなおしたり修正しているのだが、上記のように出版年度を表記する p 要素と、残りの p 要素とで flex として並べていて、年度を表記する p 要素は width: 4rem で固定したいのだが、残りの p 要素が capitalized な文字列を入れたときだけ、こうして幅がはみ出してしまう。shrink とかを使ってみたのだが、すると今度は capitalized な文字列が改行せずにまっすぐ右へ突き抜けてしまう。これ、単語のあいだにスペースが入ってるのに、まるで挙動が URL のようなシーケンスと同じで困惑している。

ああ、違うわ。これ capitalized じゃなくて、たまたまここが横幅いっぱいのコンテンツになったから起きただけで、小文字の文字列でもだめだ。ということは、flex の要素どうしで「残りの幅」という計算ができていないのか。ふつう、こういうときは「残りの幅」をあてがう要素に flex: 1 とかやればいいのだが、残念ながら「残りの幅」をあてがう方の p 要素が generic なので（つまりクラスで特別なプロパティを書いているわけではないので）、年度表記の p 要素へ逆に flex をリセットするような書き方を足さないといけない。

あるいは、MDN を見ると "min-width" で抑制できる。