[SalesForce] Embedded Visualforce page on page layout – height is restricted in Lightning Experience

I have a Visualforce page embedded on a standard page layout. I'm observing an issue where it's rendered properly in "classic" view, but in Lightning Experience, it appears to be forced to a shorter height, and a scrollbar is added. The entire content of the embedded page is there, but you have to scroll to see it. Any suggestions or ideas are welcome.

This is the VF page embedded in classic (no lightning experience):

enter image description here

However, viewing the same layout in Lightning Experience, you can see that the height is constrained, and a scrollbar is added:

enter image description here

The height of the embedded page is set to be 500px, which is clearly more than the area that's shown in Lightning Experience:

enter image description here

Page markup:

<apex:page standardController="Application__c" extensions="ApplicationChecklistExtension" showHeader="false" sidebar="false" standardStylesheets="false">

<html>


<style type="text/css">
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
    margin: 0; padding: 0; border: 0;
}

body {
    margin: 0px;
    font-family: Helvetica;
    background: #fff;
}

#crumbs {
}

    #crumbs ul {
        list-style: none;
    }
        #crumbs ul li {
            display: inline;
            position:relative;
            float:left;
        }

        #crumbs ul li a {
            display: block;
            float: left;
            background: #bebebe;
            text-align: center;
            padding: 30px 40px 30px 80px;
            position: relative;
            margin: 0 10px 0 0; 
            width:75px;
            font-size: 20px;
            text-decoration: none;
            color: #fff;
            text-align: center;
            cursor: default;
        }
            #crumbs ul li a:after {
                content: "";  
                border-top: 40px solid transparent;
                border-bottom: 40px solid transparent;
                border-left: 40px solid #bebebe;
                position: absolute; right: -40px; top: 0;
                z-index: 1;
            }

            #crumbs ul li a:before {
                content: "";  
                border-top: 40px solid transparent;
                border-bottom: 40px solid transparent;
                border-left: 40px solid #fff;
                position: absolute; left: 0; top: 0;
            }

                #crumbs ul li:first-child a {
                    border-top-left-radius: 10px; border-bottom-left-radius: 10px;
                }
                #crumbs ul li:first-child a:before {
                    display: none; 
                }

                #crumbs ul li:last-child a {
                    padding-right: 60px;
                    border-top-right-radius: 10px; border-bottom-right-radius: 10px;
                }
                #crumbs ul li:last-child a:after {
                    display: none; 
                }


        #crumbs ul li ul {
            padding: 30px 20px;
            width:155px;
            background: #f2f2f2;
            position:absolute;
            top:100%;
            left:0;
            height:260px;
        }
        #crumbs ul li ul li {
            text-align:left;
            margin-left:0px;
            font-size:13px;
        }
        #crumbs ul li ul label {
            display:inline-block;
            width:115px;
            margin: 0px 10px 20px 0px;
            line-height:18px;
        }

        #crumbs ul li a.complete {
            background: #09992b;
        }
        #crumbs ul li a.complete:after {
            border-left: 40px solid #09992b;
        }

        #crumbs ul li ul input {
            cursor: pointer;
            width: 25px;
            height: 25px;
            background: #eee;
            border:1px solid #ddd;
            margin: 0px 5px 10px 0px;
            float:left;
        }
        input.checked:after {
            content: '';
            position: absolute;
            width: 9px;
            height: 5px;
            background: transparent;
            top: 6px;
            left: 3px;
            border: 3px solid #09992b;
            border-top: none;
            border-right: none;
            transform: rotate(-45deg);
        }
        .checkboxes {
            cursor: pointer;
            width: 25px;
            height: 25px;
            background: #eee;
            border:1px solid #ddd;
            margin: 0px 5px 10px 0px;
            float:left;

        }

</style>
<apex:form >
<div id="crumbs">
    <ul>
        <li><a href="#1" id="patient">Patient</a>
            <ul>
                <li>
                <apex:inputCheckbox value="{!patientDemos}" styleClass="checkboxes" disabled="true" html-name="patientDemos" id="patientDemos"/>
                <label for="patientDemos">Demographics (first name, last name, DOB, Phone)</label>
                </li>

                <li>
                <apex:inputCheckbox value="{!patientCert}" styleClass="checkboxes" disabled="true" html-name="patientCert" id="patientCert"/>
                <label for="patientCert">Patient Certification Sign and Date</label>
                </li>

                <li>
                <apex:inputCheckbox value="{!patientAuth}" styleClass="checkboxes" disabled="true" html-name="patientAuth" id="patientAuth"/>
                <label for="patientAuth">Patient Authorization for Disclosure Sign and Date</label>
                </li>

                <li>
                <apex:inputCheckbox value="{!patientMedD}" styleClass="checkboxes" disabled="true" html-name="patientMedD" id="patientMed"/>
                <label for="patientMedD">Patient Certification Med D Sign and Date (if applicable)</label>
                </li>
            </ul>
        </li>
        <li><a href="#2" id="signature" class="complete">Signature</a>
            <ul>
                <li>
                <apex:inputCheckbox value="{!sigPrescript}" styleClass="checkboxes" disabled="true" html-name="sigPrescript" id="sigPrescript"/>
                <label for="sigPrescript">Prescription and Certification Page</label>
                </li>

                <li>
                <apex:inputCheckbox value="{!sigSign}" styleClass="checkboxes" disabled="true" html-name="sigSign" id="sigSign"/>
                <label for="sigSign">Sign and Date</label>
                </li>
            </ul>
        </li>
        <li><a href="#3" id="financials">Financials</a>
            <ul>
                <li>
                <apex:inputCheckbox value="{!incomeTotal}" styleClass="checkboxes" disabled="true" html-name="incomeTotal" id="incomeTotal"/>
                <label for="incomeTotal">Total Household Income</label>
                </li>

                <li>
                <apex:inputCheckbox value="{!incomeHouseholdNum}" styleClass="checkboxes" disabled="true" html-name="incomeHouseholdNum" id="incomeHouseholdNum"/>
                <label for="incomeHouseholdNum">Number in Household</label>
                </li>

                <li>
                <apex:inputCheckbox value="{!incomeProof}" styleClass="checkboxes" disabled="true" html-name="incomeProof" id="incomeProof"/>
                <label for="incomeProof">Proof of Income (if household income does not equal $0) (tax return [preferred] OR 2 pay stubs, SSI, SSDI, W2, and/or 1099-R)</label>
                </li>
            </ul>
        </li>
        <li><a href="#4" id="insurance" class="complete">Insurance</a>
            <ul>
                <li>
                <apex:inputCheckbox value="{!insurCovered}" styleClass="checkboxes" disabled="true" html-name="insurCovered" id="insurCovered"/>
                <label for="insurCovered">Covered: Y/N</label>
                </li>

                <li>
                <apex:inputCheckbox value="{!insurCarrier}" styleClass="checkboxes" disabled="true" html-name="insurCarrier" id="insurCarrier"/>
                <label for="insurCarrier">Carried Information (if covered)</label>
                </li>

                <li>
                <apex:inputCheckbox value="{!insurNum}" styleClass="checkboxes" disabled="true" html-name="insurNum" id="insurNum"/>
                <label for="insurNum">Cardholder ID / Policy # (if covered)</label>
                </li>

                <li>
                <apex:inputCheckbox value="{!insurGroupNum}" styleClass="checkboxes" disabled="true" html-name="insurGroupNum" id="insurGroupNum"/>
                <label for="insurGroupNum">Group # (if covered)</label>
                </li>

                <li>
                <apex:inputCheckbox value="{!insurCard}" styleClass="checkboxes" disabled="true" html-name="insurCard" id="insurCard"/>
                <label for="insurCard">Card: Front and Back (if covered)</label>
                </li>
            </ul>
        </li>
    </ul>
</div>
</apex:form>

</html>

</apex:page>

EDIT: It appears that the height of the displayed page in Lightning Experience is dictated by the height of the chevron blocks. For instance, if I forced the height of those blocks to say, 80px, this is what happens:

enter image description here

Best Answer

It appears that something in the default Lightning Experience styles conflicted with the <body> of the embedded page - I added height: 500px !important; to <body> in the Visualforce markup and the height is no longer constrained:

enter image description here

Related Topic