[Résolu] Problème d'affichage dans une div

Bonjour,
Je souhaite afficher 5 cartes (leaflet) sur ma page web dans 2 div.

Je vous fait un PAINT pour que la compréhension soit plus simple



Et voici le resultat que j'obtiens:


Je pense que mon erreur vient du CSS mais je ne la trouve pas..

Si vous avez une idéé je suis preneur ahah

Merci
------------------------

<div class="maps">
                <div id="mapid" class="map"></div> 
                <div class="drom_maps">
                  <div id="map_regions_antilles" class="drom_map"></div>
                  <div id="map_regions_guyane" class="drom_map"></div>
                  <div id="map_regions_mayotte" class="drom_map"></div>
                  <div id="map_regions_reunion" class="drom_map"></div>
                </div>
            </div> 

.map {
  min-height: 40em;
  min-width: 35%;
  border-right: 2px solid var(--theme-background-grey);
}
#mapid{
  width: 450px;
  height: 400px;
}
#map_regions_antilles{
  width: 150px;
  height: 50%;
}

#map_regions_guyane{
  width: 150px;
  height: 50%;
}

#map_regions_mayotte{
  width: 150px;
  height: 50%;
}

#map_regions_reunion{
  width: 150 px;
  height: 50%;
}
.maps{
  display:flex;
}

.drom_maps{
  display:flex;
  flex-wrap: nowrap;
  padding-left :0.5%;
}

Salut,

Ton #mapid fait 450px

Tes 4 .drom_map font 150px (attention à #map_regions_reunion il y a un espace entre 150 et px)

450 + 4x150 = 1050px donc si ton ecran fait plus de 1050px bah il reste de la place.

https://jsfiddle.net/undless/b1md34c2/

Il te faut un design fluide. Quel est le comportement que tu souhaites ? Que toutes les map grandisse quand l'écran grandi ou seulement la map de gauche et laisser les petites cartes à 150px ?

Bonjour, j'ai résolu mon problème. Mon container avait une largeur défini... Erreur de débutant ahah