Как отображать горизонтальную полосу прокрутки при уменьшении экрана браузера

Вот такую ​​приборную панель я сделал. Который содержит 4 DIVs. когда браузер полностью открыт когда я уменьшаю размер экрана браузера

Я хочу, чтобы всякий раз, когда экран браузера уменьшается ... панель инструментов DIVs должна получать horizontal scroll bar, а не обрезать дисплей. Это мой код для отображения частичного представления в основном представлении.

<fieldset>
    <%using (Ajax.BeginForm(new AjaxOptions { InsertionMode = InsertionMode.Replace}))/*, UpdateTargetId = "RecentDiv" }))*/
      { %>


    <div id="MainDashboardDiv">
        <div class="LiveTile">
            <div id="RecentDiv"> 
                    <h4 class="RequestTitle">
                    <%: Html.ActionLink("Recent Requests", "CRMRequestsList", new { requestType = "Recent" })%>
                    </h4>
                <%Html.RenderAction("RecentRequests",Model); %>
            </div>
            <!--End of RecentDiv -->

            <div id="PriorityDiv">
                <h4 class="RequestTitle">
                    <%: Html.ActionLink("High Priority Requests", "CRMRequestsList", new { requestType = "Priority" })%>
                 </h4>

                <%Html.RenderAction("PriorityRequests", Model); %>
            </div>
            <!--End of PriorityDiv -->
        </div>
        <!--End of UpperLiveTiles -->
        <div class="LiveTile">

             <div id="PendingDiv">
                <h4 class="RequestTitle">
                <%: Html.ActionLink("Pending Requests", "CRMRequestsList", new { requestType = "Pending" })%>
                </h4>
                <%Html.RenderAction("PendingRequests", Model); %>

            </div>
            <!--End of PendingDiv -->
            <div id="ApprovedDiv">
                    <h4 class="RequestTitle">
                    <%: Html.ActionLink("Approved Requests", "CRMRequestsList", new { requestType = "Approved" })%>
                    </h4>
                <%Html.RenderAction("ApprovedRequests", Model); %>

             </div>
            <!--End of ApprovedDiv -->


        </div>
        <!--End of LowerLiveTiles -->
    </div>
    <!--End of MainDashboardDiv -->
    <%} %>
    </fieldset>

Это CSS, который я применяю:

#MainDashboardDiv {
    height: auto;
    width: 100%;
    margin: 0 auto;  
    padding-bottom: 4%; 
    overflow: hidden;

}
.LiveTile{
    height: 260px;
    overflow: hidden;
    padding-top: 1%;
    position: relative;
    width: 100%;
}

#RecentDiv, #PendingDiv
{
    width: 48%; 
    display: inline-block; 
    position: relative; 
    height:inherit;
    overflow: scroll;
    float: left;
    margin-bottom: 1%;
    margin-right: 1%;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    background:rgba(0,117,149,0.9);
}
#PriorityDiv,#ApprovedDiv
{

    width: 48%;  
    position: relative; 
    height:inherit;
    display: inline-block;
    overflow: scroll;
    float: left;
    margin-bottom: 1%;
    margin-right: 1%;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    background:rgba(0,117,149,0.9);

}