Warum wird der Inhalt in meinem div ausgeblendet?

Question

Ich habe ein div (RView), das einen anderen div-Inhalt hat, aber im Gegensatz zu meinen anderen divs, wenn die Seite in der Breite schrumpft, wird der Inhalt nicht umgestaltet und springt aus dem div heraus. Warum ist das ?, Ich möchte die Bilder auf der linken Seite des Textes & alle Inhalte in einer Zeile wie es derzeit ist, aber nicht aus dem div. Auch dies ist mein erster Versuch, eine Website zu erstellen, also weiß ich, dass es nicht annähernd perfekt ist, aber ich lerne immer noch.

body { 
 
    margin: 0px; 
 
} 
 

 
.RView { 
 
    width: 100%; 
 
    background-color: #BEBFBE; 
 
    justify-content: center; 
 
    display: flex; 
 
} 
 

 
.RView div { 
 
    display: flex; 
 
} 
 

 
.RView p { 
 
    margin: 20px 0px 0px 20px; 
 
    justify-content: center; 
 
    width: 150px; 
 
} 
 

 
.ReVW { 
 
    display: inherit; 
 
    width: 105px; 
 
    height: 100px; 
 
    margin: 20px 0px 20px 80px; 
 
}

<div class="RView"> 
 
    <div><a href="https://www.cnet.com/uk/reviews/"><img src="Img/CNet.png" class="ReVW" alt="CNet Review"></a><p>"Incredibly beautiful phone case for an affordable price" - CNet</p></div> 
 
    <div><a href="https://www.amazon.co.uk/ref=nav_logo/262-3052852-5868165"><img src="Img/AMZN.png" class="ReVW" alt="Amazon Review"></a><p>"Definetly some new competition on the market for the phone case industry" - Amazon</p></div> 
 
    <div><a href="http://www.techadvisor.co.uk/review/phone-cases/"><img src="Img/RV1.png" class="ReVW" alt="Bolt Review"></a><p>"Wide range of case designs for any phone, just amazing cases" - Bolt Reviews</p></div> 
 
    </div>

Answer 1

Sie setzen die Spalten in einem Flex-Container flex zu sein, anstatt einer Flex-Spalte.

Im Folgenden werden sie als Spalten gleicher Breite festgelegt und sollten den Inhalt überlaufen lassen.

.RView div { 
    flex:1; 
} 

Hier ist aktualisiert css, um die Bilder neben dem Textinhalt anzuzeigen, mit Margen zurückgesetzt.

.RView p { 
    margin: 0; 
    display: inline-block; 
    width: 50%; 
} 

.ReVW { 
    width: 50%; 
    margin: 0; 
}