مشكلة خروج العناصر بره الشاشة وظهور سكرول أفقي بسبب الـ Overflow في CSS

يا جماعة أنا بظبط الهيكل (Layout) بتاع الصفحة عندي، وعامل ديف رئيسي (Container) ومقسمه بالـ Flexbox عشان يعرض كروت المنتجات جنب بعض. المطلوب: الكروت تتوزع بشكل متناسق جوه الشاشة، ولما الشاشة تصغر (تكون على الموبايل مثلاً) الكروت تنزل تحت بعض تلقائي من غير ما تبوظ الدنيا. المشكلة اللي مقابلاني: أول ما بصغر الشاشة أو بفتح من الموبايل، بلاقي الكروت كلها محشورة في سطر واحد وخرجت بره حدود الشاشة تماماً من ناحية اليمين، وظهرلي سكرول أفقي (Horizontal Scrollbar) بوظ شكل الموقع خالص وخلى التجربة سيئة جداً! مش فاهم ليه الـ Flexbox مش راضي يخلي الكروت تنزل سطر جديد.

.products-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 20px;
    /* السطر المفقود هنا هو اللي بيمسك الـ Flexbox ويخليه ينزل سطر جديد */
}

.product-card {
    width: 300px; /* كل كارت واخد عرض ثابت */
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 15px;
}