Фиксированная высоты с псевдоожиженномом текстовой областью макс высоты - Переполнение авто

Question

http://codepen.io/africanmatt/pen/IcGpa

.text { 
    max-height: 0; 
    overflow-y: auto; 
    transition: all .45s ease-in-out; 
} 

.text-active { 
    max-height: 50%; 
} 

мне нужно изменить размер макс-высоту .text компоненты пропорционально высоту в правой колонке на окне изменить размер так, чтобы левый и правый столбцы остаются ровно ровными. Я мог бы пропустить что-то простое здесь. Я предполагаю, что JS может решить проблему, повторно установив максимальную высоту, основанную на ширине и высоте окна, но, безусловно, есть более простое решение css?

Answer 1

попробовать это ...

window.onresize = function(){ 
    $('.text').css('max-height', 100); 
} 

Answer 2

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

В настоящее время поля над и под текстовым полем изменяются, что перемещает его вверх и вниз и затрудняет выравнивание с правой стороны. Так будет, что в конце концов будет левая сторона? Вы можете установить текстовое поле в более статической позиции, а затем поэкспериментировать с значением max-height в JS.