Worin besteht denn das Problem genau? Wenn ich die Breite des Browserfensters ändere sieht es auch unter 700px ganz ordentlich aus, nur am Übergang zuckt es ein wenig.
Du benutzt für flex Prozentwerte, das war mir neu weil ich bisher nur dimensionslose Werte genommen hatte. Aber Browser und VS-Code akzeptieren es und ich musste erst nachlesen, wie sie es interpretieren. Bin dann hier fündig geworden:
CSS Reference Guide: flex - LogRocket Blog
The CSS flex property is a shorthand for setting how flexible items will grow or shrink to fill their parent container.
blog.logrocket.com
Demnach wird ein Prozentwert als flex-basis interpretiert. flex: 1000%; macht aber IMO keinen Sinn, was willst Du denn damit erreichen?