htmlでflex-wrap: wrap; をしても折り返されない

子要素(#about li)の幅を50%に指定しているので折り返しません。
固定値に設定すれば幅の合計が画面幅を超えれば折り返すようになります。

50%(２列)で、画面幅がある幅より狭くなったら折り返したいということなら、 min-width で最小幅を固定値で設定すればいいでしょう。

css

1 width: 50%;2 min-width: 300px;

※実際は左右余白分を考慮した幅にする必要があります。
padding: 2% なら、width: 46%;
かつ既定の余白をリセット
など