flex force wrap

by jpeter06

HTML

<div class="hidden">
  <svg>
    <defs>
      <path id="aspaDef" vector-effect="non-scaling-stroke" d="M 0.14812938,-0.32911038 2.8053269,-0.42756998 3.0330811,-1.03977 13.562973,-0.00219185 13.514033,1.1402241 0.47955654,0.78529138 Z" ></path>
       <path id="mountain" vector-effect="non-scalin-stroke" d="M 86.938554,83.179369 C 84.772045,80.910894 76.884285,72.4549 70.00606,72.48973 63.127834,72.524574 50.787797,85.838365 44.814498,85.851776 38.502109,85.865912 33.116606,79.63842 26.813043,79.972478 21.378251,80.260496 16.503651,84.370533 13.25149,87.187981 9.9993314,90.005428 6.837709,94.670727 6.837709,94.670727 l 90.075016,1.1e-5 c 0,0 -7.807662,-9.222891 -9.974171,-11.491369 z"></path>
       <path id="mount1" vector-effect="non-scalin-stroke" d="M 87.548268,83.105047 C 85.328846,80.781179 78.541787,71.780519 70.202306,72.15439 61.862829,72.528264 46.768127,87.659416 40.807364,94.877002 l 56.958622,1.2e-5 c 0,0 -7.998308,-9.4481 -10.217718,-11.771967 z"></path>
       <path id="mount2" vector-effect="non-scalin-stroke" d="m 25.954594,79.819842 c -5.567501,0.295042 -10.561129,4.505453 -13.892702,7.391696 -3.33157,2.886244 -6.5703942,7.665464 -6.5703942,7.665464 l 52.9616282,1.2e-5 C 54.162924,91.705161 34.222798,79.615741 25.954594,79.819842 Z"></path>
      <path  id="torretaDef" d="M -1.1490272,26.563818 H 1.2283742 L 0.69166711,0.5975938 -0.75561874,0.54528098 Z" 
      vector-effect="non-scaling-stroke" ></path>
      <g  id="aspas">
        <use  href="#aspaDef"></use>
        <use  href="#aspaDef" transform="rotate(120,0,0) "></use>
        <use  href="#aspaDef" transform="rotate(240,0,0) "></use>
        <circle  r="2.0" vector-effect="non-scaling-stroke"></circle>
      </g>
    </defs>
  </svg>
</div>

<div class="container neocont peninsula">
  <p class="alone textCenter cab">
  Península
  </p>
  <div  class="alone">
    <div class="neobutton">mímico</div>
  </div>
  <div  class="neobutton">
                  <svg aria-hidden="true"...

CSS

html, body{
  padding:0px;
  margin:0px;
  width:100%;
  height:100%;
  overflow:auto;
  font-size:min(2.5vw, 2.5vh);
  font-family:sans-serif;
}

body{
 padding:1.5rem;
 box-sizing: border-box;
}

body {
  --neo-bg: #ebecf0;
  --neo-color: #8992a5;
  --neo-bt-bg1: #ffaa77;
  --neo-shadow:#c8c9cc;
  --neo-shadow2:#e0e0e0;
  --neo-light:#FFFFFF;
  --div-size:6rem;
  --pen-color:orange;
  --can-color:#00a7ff;
  background:var(--neo-bg);
  color: var(--neo-color);
  user-select: none;
}

body, .container{
  box-sizing: border-box;
  display:flex;
  flex-wrap: wrap;
  gap:1.5rem;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding:1.5rem;
}
body{
  flex-direction:row;
}

.container {
  width:20rem;
}

.container div{
  flex-grow: 0;
  width:var(--div-size);
  height:var(--div-size);
  display:flex;
  text-align:center;
  justify-content:center;
  align-items: center;
  box-sizing: border-box;
  flex-direction: column;
}
.peninsula{

}
.canarias{

}

.alone{
  background:transparent;
  flex-basis: 100%;
}

.textCenter{
  text-align:center;
}

.hidden{ display:none}

/** ASPAS ANIMATION **/
.animAspas:hover .aspas{
   animation-play-state: running;
}
.aspas {
    animation-duration: 6s;
    animation-direction: normal;
    animation-name: rotAspas;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-play-state: paused;
}

@keyframes rotAspas {
  0% {  transform: rotate(0);}
  100% { transform: rotate(360deg);}
}

/*** NEO **/
.neocont{
  box-shadow:  6px 6px 11px var(--neo-shadow), 
             -5px -5px 11px var(--neo-light);
  border-radius: 10px;
}

.neocab{
  box-shadow: inset 1px 1px 2px var(--neo-shadow), 
            inset -1px -1px 2px var(--neo-light);
  border-radius: 8px;
  padding:16px;
  margin: 0px;
}

.cab{
  font-size:2rem;
  padding:0.9rem;
  margin: 0px;
}
.peninsula .cab { color:var(--pen-color)}
.canarias .cab {color:var(--can-color)}


.neobody{
   ...