flexプロパティ使用時の真円の作り方

Question

実現したいこと

flexプロパティ使用時にp要素と横並びのdiv要素（正方形）を作り、真円を作りたいです。

発生している問題

下記のコードを実行すると写真左の様になりますが、ウィンドウサイズを小さくすると写真右の様に円が潰れてしまいます。

最終形のイメージとしては円は変形せず、文章のみ変形させたいです。
（画像編集ソフトで加工した物なので実際にこうなるかは分かりません）

ご存知の方がいらっしゃいましたら宜しくお願い致します。

補足

最新のGoogle Chromeを使用しています。

<ul>
    <li>
        <div></div>
        <p>このテキストは見本です。このテキストは見本です。</p>
    </li>
    <li>
        <div></div>
        <p>このテキストは見本です。このテキストは見本です。</p>
    </li>
</ul>

ul {
    list-style: none;
}

li {
     display: flex;
}

div {
    height: 300px;
    width: 300px;
    background-color: #f00;
    border-radius: 50%;
}

Comments

[m.ts10806]

現在のコードの表示を画面キャプチャとって質問本文にご提示ください

[youhey5488]

正直、最終形がどうなって欲しいのかよくわからないのでキャプチャで教えてください

[yambejp]

結果としてどういう配置の表示を希望するのか
手書きでいいので図示してください

[m.ts10806]

いきなり
>display: flex;を外すと<div>要素は潰れなくなるので
と出てきているので困惑させてしまっていると思います。
「こういう風にすると潰れてしまう」と再現手順を記載してください（私が勝手に確認した手順はありますが、やはり質問者さんの手元で確認した手順を提示すべきと思います）

[Reem]

分かりづい質問をしてしまい、すみませんでした。
まだ不明確な点があればご指摘お願いします。

Answer 1

ちょっと何が疑問なのかわからないですが、想定どおりに表示されると思います

<style>
ul {list-style: none;}
li:nth-child(1){background-Color:yellow}
li:nth-child(2){background-Color:lime}
li{display: flex;}
div {
    height: 50px;
    width: 50px;
    background-color: #f00;
    border-radius: 50px;
}
</style>
<ul>
<li>
<div></div>
<p>このテキストは見本です。</p>
</li>
<li>
<div></div>
<p>このテキストは見本です。</p>
</li>
</ul>

追記

追記分windowの幅が狭くても丸くしたいなら

div {
    height: 300px;
    min-width: 300px;
    background-color: #f00;
    border-radius: 300px;
}

Comments

[Reem]

ご回答ありがとうございます。
説明が不十分で私がイメージしていた物が伝わっていなかった様なので、質問内容を修正致しました。
よろしければ、またご回答お願いします。

[yambejp]

追記してあります

[Reem]

min-widthで最小サイズを指定すれば想像通りの状態になりました。
ありがとうございました！