Boostrap размер исправление столбцов в функции первого столбца

Question

У меня есть строка с двумя колоннами:

• первых столбцов содержит SVG с размером в ViewBox и COL-MD-8
• в вторые столбцы содержат текст с переменным размером.

Я хочу, чтобы все столбцы одного размера (размер первых столбцов определяется svg), если сложения второго размера слишком длинны, я хочу использовать свиток это столбцы

Я уже пытаюсь использовать flex, но это самые большие колонки, которые определяют размер любого другого решения.

ps: ширина не является проблемой, я ищу, чтобы зафиксировать высоту второго div в зависимости от высоты первого без использования стиль = 'высота: хх%' или ПВ

код:

.equal, .equal > div[class*='col-'] { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    flex:1 0 auto;

<div class="row equal"> 
 
    <div class="col-md-8"> 
 
    <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" version="1.1" viewBox="0 0 1500 500"></svg> 
 
    </div> 
 
    <div class="col-md-4" style="overflow-y:scroll"> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum 
 
    </p> 
 
    </div> 
 
</div>

Answer 1

я создал скрипку с помощью начальной загрузки здесь https://jsfiddle.net/jn9cwngs/3/

здесь вы можете видеть, я удалил все ваши CSS и HTML изменили немного, как это:

<div class="col-xs-4"> 

вы можете использовать col-*, как вы хотите.

и я использовал простой JS, чтобы определить высоту содержимого как SVG

jQuery(function(){ 
    var images = $('svg'); 
    var height; 
    images.each(function(){ 
    var image = $(this); 
    height = image.height(); 
    }); 
    var content = $('.description'); 
    content.each(function(){ 
    var text = $(this); 
    text.height(height); 
    }); 
});