Создание Визуальной Силы. Нужен совет для динамической регулировки в зависимости от размеров экрана?

Question

Первоначально опубликовано на SalesForce Stack Exchange.

Это фрагмент кода с моей страницы Visual Force, используемой для отдела продаж.

<div
                class="slds-col slds-size_1-of-1 slds-medium-size_1-of-1 slds-large-size_1-of-3 slds-box slds-text-heading_small slds-theme_shade slds-p-bottom_medium"
                style="Height:195px">
                <div class="slds-text-align_center slds-m-top_x-large">
                    Non-UK Residents Will Be Required To Produce Evidence Of Their
                    Current Status <br /> (Passport Or Other Official Documentation
                    e.g. Visa Details)
                </div>
            </div>
            <div class="slds-col slds-large-size_5-of-6 slds-box slds-theme_shade"
                style="Height:350px">
                <div class="slds-text-heading_small slds-box_xx-small">Personal
                    Needs</div>
                <div
                    class="slds-grid slds-wrap slds-text-title slds-align_absolute-center">
                    <div class="slds-box">
                        <b> Disability Or Health Issues:- </b>
                        <div class="slds-form-element">
                            <div class="slds-form-element__control">
                                <apex:inputField value="{!Apprentice__c.Recorded_Disabilities__c}" />
                            </div>
                        </div>
                    </div>
                    <div class="slds-box">
                        <b> Learning Difficulties:- </b>
                        <div class="slds-form-element">
                            <div class="slds-form-element__control">
                                <apex:inputField value="{!Apprentice__c.Learning_Difficulties__c}" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="slds-col slds-large-size_1-of-6 slds-box slds-theme_shade"
                style="height: 350px;">
                <div class="slds-text-heading_small slds-text-align_center slds-box_xx-small">If you have selected any of the 'Other' needs. Please provide further details below:-</div>
                <div
                    class="slds-grid slds-wrap slds-text-title slds-align_absolute-center">
                    <apex:inputTextArea value="{! Apprentice__c.Other_Disabilities__c}" style="width:100%; height:250px;"/>
                </div>
            </div>

Я хочу, чтобы моя страница правильно отображалась на меньшем экране,он работает на среднем мониторе, но если я уменьшу его, у меня возникнут проблемы с высотой, которые портят его внешний вид.Я в настоящее время использую Высота: --- px, и я пробовал Высота: ---%, который тоже не работает.

Вот как это выглядит на моем мониторе в полном размере.

Рабочий размер

Но как только я уменьшу размер окна, из контейнера будет выдан мультиспиклист.Как сделать так, чтобы он оставался в области блока или как увеличить высоту блока только при меньшем размере экрана?

Сломанный размер

Та же проблема здесь: -

Рабочий макет Сломанный макет

Спасибо за любую помощь