CSS Flexboxで疑似要素と本体を横並びにしているが本体が改行すると疑似要素の幅が縮む

Question

h2見出しに CSS counter を使って行頭に連番を表示させてます。
連番は疑似要素の before に設定しています。

見出しが改行しない場合は想定通りのレイアウトになるのですが、見出しか長くて改行すると疑似要素の幅が
widthで指定しているにもかかわらず無視して縮んでしまいます。

なぜwidthが無視されるのでしょうか。また、また本体の長さにかからわず幅を固定する方法はないでしょうか。

<div class="post">
 <h2>aaaaaaaa</h2>
 <h2>ああああああああああああああああああああああああああああああああああああああああああああああ</h2> 
</div>

.post h2{
	display: flex;
	line-height: 4.2rem;
	font-size: 1.8rem;
	counter-increment: h2;
}
.post h2:before {
	content: counter(h2);
	background-color: #333;
	color: #fff;
	text-align: center;
	width: 4.2rem;
/*  flex-basis: 4.2rem; */
	height: 4.2rem;
	line-height: 4.2rem;
	font-size: 1.8rem;
	margin-right: 1.2rem;
}

Answer 1

flex-shrinkを指定してみてはいかがでしょう。

.post h2:before {
    content: counter(h2);
    background-color: #333;
    color: #fff;
    text-align: center;
    width: 4.2rem;
/*  flex-basis: 4.2rem; */
    height: 4.2rem;
    line-height: 4.2rem;
    font-size: 1.8rem;
    margin-right: 1.2rem;
    flex-shrink: 0; /* ADD */
}
```**動くサンプル：**[https://jsfiddle.net/xpu9nsj5/](https://jsfiddle.net/xpu9nsj5/)

Comments

[hatena19]

flex-shrink: 0; でうまくいきました。0 を指定することで縮小しないということになるのですね。
解決です。ありがとうございました。