Merhabalar arkadaşlar. Ben 2 tane elementi yan yana getirmek istiyorum. Bunlardan 1.sinin width değeri ekranın 80%'sini kapsayacak, diğeri ise 20%'sini. Fakat şöyle bir problem var; 1. veya 2. elementin içerisindekinin width değeri çok yüksekse(diyelim swiper.js kullanıyorsunuz ve width sürekli değişiyor. Örn 5000px) belirlediğim width değerini aşıyor ve o elementi de genişletiyor. Aşağıdaki kodda daha iyi anlarsınız diye düşünüyorum ve oradan devam ediyorum:

<div class="container">
    <div class="div-1">
        ...
    </div>
    <div class="div-2">
        ...
    </div>
</div>

<style>
    .container {
        width: 100%;
        height: 200px;
        display: flex;
        align-items: center;
    }
    
    .div-1 {
        flex-basis: 80%;
        /* width: 80%; */
        /* max-width: 80%; */
    }
    .div-2{
        flex-basis: 20%;
        /* width: 20%; */
        /* max-width: 80%; */
    }
</style>

Örnek Senaryo:
Burada 'div-1' içerisine slider koydunuz ve slider genişliği 5000px oldu. O zaman 'div-1' genişliği de 5000px oluyor. Benim istediğim div-1 her zaman ekranın 80%'si, div-2 ise ekranın her zaman 20%'si olacak. width, max-width, flex, flex-shrink, flex-grow her şeyi denedim. Fakat olmuyor. Taşmaması için mutlaka div-1'e px cinsinden bi değer vermeme gerekiyor fakat böyle olsun istemiyorum. overflow ise hiçbir şeyi değiştirmiyor.

Nerede hata yapıyorum acaba?