flexboxの子要素の表示を直したい

Question

発生している問題

CSSのflex boxで正方形の可変ブロックを配置するようにしたところ（画像とコード参照）、中の要素のpが縦に表示されるようになってしまいました。
どうも孫要素のdivのwidthあたりでおかしくなってしまっているようなのですが、直し方が分かりません。

通常のpのように横表示で、できれば正方形の中央に表示できればと思います。
どなたかご教授ください。

該当のソースコード

<div class="productList">
	<?php for ($i = 0; $i < 9; $i++) : ?>
		<div class="product">
			<div>
			<p>ここに商品</p>
			</div>
		</div>
	<?php endfor; ?>
</div>

.productList {
	display: flex;
	flex-wrap: wrap;
}

.product {
	flex: 0 0 calc((100% - 20px)/3);

	margin-right: 10px;
	margin-bottom: 10px;
	background-color: #C0C0C0;
}

.product :before {
	display: block;
	content: '';
	padding-top: 100%;
}

.product:nth-child(3n) {
	margin-right: 0;
}

.product div {
	width: 0;
	height: 0;
	padding-bottom: calc(100% - 20px);
}

試したこと

chromeの検証モードでdivのwidthを無効にしたところ、表示が変化したのでここが原因か？と思いました。

Answer 1

.product:beforeのスタイルは削除。
.product divのwidthとheightを0にしない。
div要素の内容のp要素を中央に表示するなら、こんな感じかな。

.productList {
    display: flex;
    flex-wrap: wrap;
}

.product {
    flex: calc((100% - 20px)/3);
    margin-right: 10px;
    margin-bottom: 10px;
    background-color: #C0C0C0;
}

.product:nth-child(3n) {
    margin-right: 0;
}

.product div {
    height: 100%;
    padding-bottom: calc(100% - 20px);
    display: flex;
    align-items: center;
    justify-content: center;
}

Comments

[NASUBI73]

回答ありがとうございます！上記の通りやってみたら、おおよそは思い通りになりましたが、幅が2px足りなくなったのと、padding-bottomのせいか各要素の下に空白ができてしまい、解消できなかったため、しばらく調べて下記のサイトのサンプル通りに記述したところ、正方形のまま完璧に整えられました！よければご覧になってください。
https://wreath-ent.co.jp/blog-3560/
ありがとうございました！