CSS-Problem mit Div-Wrapping eine andere

Question

Ich habe ein Problem, dass ich nicht schaffen, meine Sektion richtig zu wickeln.

Ich habe einen div "Container", der mit einem PHP-Teil von einigen Divs bevölkert ist und ich weiß nicht, wie man es richtig mit dem Rand umschließt: solid von meinem erstellten div.

html/php Teil

<div class = "listaCarrello" id ="listaCarrello "style="display: <?php echo !isset($_GET['riepilogo'])&&isset($_SESSION['username'])? "block":"none"?>"> 
     <?php 
     $isEmpty = true; 
     foreach ($_COOKIE as $key => $val) { 
      $query = $connection->query("SELECT * FROM prodotto WHERE IDProdotto = $key"); 
      if ($query != null) { 
       $isEmpty = false; 
       $row = $query->fetch_assoc(); 
       echo "<div class = \"elemCarrello\">"; 
       echo "<p class=\"nomeCarrello\">" . $row['nomeProdotto'] . "</p>"; 
       echo "<div class = \"imgCarrello\">"; 
       echo "<img src = \"img/" . $row['immagine'] . "\" alt=\"" . $row['nomeProdotto'] . "\"height=\"150px\" width=\"150px\">"; 
       echo "</div>"; 
       echo "<div class=\"prezzoCarrello\">"; 
       echo "<p>Prezzo unitario " . $row['prezzo'] . "</p>"; 
       echo "<p> Quantità: " . $val; 
       echo " - Prezzo totale: "; 
       echo "€" . $row['prezzo'] * $val . "</p>"; 
       $totale = $totale + ($row['prezzo'] * $val); 
       echo "<p> Modifica la Quantità: "; 
       echo "<input type='number' id = 'quantita' name='quantita' value='" . $val . "'>"; 
       echo "<button onclick='refreshCookie($key, document.getElementById(\"quantita\").value)'>AGGIORNA</button>"; 
       echo "</div>"; 
       echo "<button class='eliminaCarrello' onclick='eliminaCookie($key)' style='background: white'> <img src='img/elimina.png' height='50' width='50'> </button>"; 
       echo "</div>"; 
      } 
     } 
     ?> 
     </div> 
     <?php 
     if (!$isEmpty) { 
      echo "<div class='checkOut'>"; 
      echo "<p>Totale: €" . $totale . "</p>"; 
      echo '<button id="2ndphase" onclick="goToAddress()">AVANTI</button>'; 
      echo "</div>"; 

     } 
     ?> 

css Teil

.listaCarrello{ 
border:solid; 
border-color: lightgray; 
border-radius: 10px; 
text-align: center; 
margin-top: 5px; 
width: 99%; 
margin-bottom: 5px; 
padding-bottom: 50px; 
} 

.elemCarrello{ 
margin-top: 5px; 
width: 99%; 
text-align: left; 
float:left; 
display: block; 
margin-bottom: 5px; 
border: solid; 
margin-left: 5px; 
border-radius: 10px; 
} 

.nomeCarrello{ 
padding-left: 10px; 
font-weight: bold; 
} 

.imgCarrello{ 
float: left; 
padding-left: 10px; 
} 

.eliminaCarrello{ 
margin-top: -13px; 
margin-bottom: 10px; 
} 

Sorry für mein Englisch, und ich hoffe, dass Sie verstehen, was ich sage. Ich habe ein Bild als Beispiel angehängt

Answer 1

Setzen Sie den "Container" divs Überlauf Styling auf automatisch.

container{ 
    overflow:auto; 
}