Help needed with Flow embedded in Visualforce page

I have added a visual flow into a visual force page, created an action and added this to the page layout. 

Here is the code of vf page

<apex:page standardController="Visit_Report__c" title="{!Visit_Report__c.Name}" lightningStylesheets="true">
<apex:outputPanel layout="block" style="height:500px;">
<flow:interview name="Sample_Request_Wizard_Mobile" buttonLocation="both" finishLocation="/{!Visit_Report__c.Id}" rerender="Visit_Report__c">
 <apex:param name="UserID" value="{$User.Id}"/>
 <apex:param name="VisitReportId" value="{!Visit_Report__c.Id}"/>
 <apex:param name="AccountID" value="{!Visit_Report__c.Account__c}"/>
 <apex:param name="ContactID" value="{!Visit_Report__c.Contact__c}"/>
 <apex:param name="OpportunityID" value="{!Visit_Report__c.Opportunity__c}"/>
 <apex:param name="CampaignId" value="{!Visit_Report__c.Campaign__c}"/>
</flow:interview>
</apex:outputPanel>
</apex:page>

When im in mobile version and hit the action button the flow is only showing on top and has a scrollbar on the right (you can't see it in the screenshot, it will only appear when you hover over it (the scrollbar is where the red rectangle is added)

I tried to adjust 

<apex:outputPanel layout="block" style="height:500px;">

But whatever value i put in height it won't change at all. It's like some background process is overwriting this.

Does anyone know how to display my flow in fullscreen on the mobile version (without the scrolbar)?