Comment réduire la colonne de droite dans la grille jusqu'à max. 100% de la colonne de gauche?

Question

J'ai deux colonnes côte à côte dans une grille bootstrap. Je dois forcer la deuxième colonne à ne pas être plus haute que la première. Je sais comment forcer la deuxième colonne pour obtenir la pleine taille en fonction de la première colonne en utilisant la méthode répandue d'affichage: table. Mais comment gérer l'inverse? Je préfère une solution utilisant css, pas de js si possible. Le premier contient une image responsive, le second contient du texte. Si le texte nécessite plus d'espace que l'image, le texte doit défiler.

<div class="row">  
<div class="col-xs-6 first"> 
    <img class="img-responsive" src="image/example.jpg" /> 
</div> 
<div class="col-xs-6 second"> 
    <p> 
     Some text lore ipsum etc etc<br /> 
     Some text lore ipsum etc etc<br /> 
     Some text lore ipsum etc etc<br /> 
     Some text lore ipsum etc etc<br /> 
     Some text lore ipsum etc etc<br /> 
     Some text lore ipsum etc etc<br /> 
     Some text lore ipsum etc etc<br /> 
     Some text lore ipsum etc etc<br /> 
     Some text lore ipsum etc etc<br /> 
    </p> 
</div> 

Answer 1

Vous pouvez vérifier cet exemple

Si vous voulez faire le réglage en hauteur du texte div liés à l'image que vous pouvez aller avec la propriété max-height de css

Vous pouvez augmentez et diminuez la propriété max-height selon vos besoins.

Et d'autre part donner overflow-y: auto pour le défilement.

Espérons que cela vous aidera.

.second { 
 
max-height: 165px; 
 
overflow-y: auto; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="row">  
 
<div class="col-xs-6 first"> 
 
    <img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" /> 
 
</div> 
 
<div class="col-xs-6 second"> 
 
    <p> 
 
     Some text lore ipsum etc etc<br /> 
 
     Some text lore ipsum etc etc<br /> 
 
     Some text lore ipsum etc etc<br /> 
 
     Some text lore ipsum etc etc<br /> 
 
     Some text lore ipsum etc etc<br /> 
 
     Some text lore ipsum etc etc<br /> 
 
     Some text lore ipsum etc etc<br /> 
 
     Some text lore ipsum etc etc<br /> 
 
     Some text lore ipsum etc etc<br /> 
 
    </p> 
 
</div>