基礎畫布外滾動條和內容顯示，具有廣泛的主要內容

Question

當主顯示區域中的內容過寬時，我遇到了嘗試使用Foundation 6.2.0的Off-Canvas功能的問題。 在大多數情況下，內容會換行，但是如果你要顯示無法包裝的內容（例如表格或圖像），我希望屏幕底部的水平滾動條允許我向側面滾動揭示其余的內容。

情況似乎並非如此，內容被隱藏。

此外，如果主面板的內容超出了屏幕，並且您正在使用從屏幕右側滑入的偏移畫布，則此面板的內容在滑動時隱藏在主面板的覆蓋層中右邊小組打開。

我已經鏈接了一個JSFiddle來顯示這個問題，因為它在我在瀏覽器中看到它時呈現。 我無法讓Stack Overflow代碼運行器正常工作。 使用底部的滾動條和“向右”按鈕顯示兩個問題。

當主容器的內容比屏幕寬，並且無法包裝時，是否有人知道如何讓Foundation適應布局？

 $(document).foundation(); 

 <div class="off-canvas-wrapper"> <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper> <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>abcd</div> <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">abcd</div> <div class="off-canvas position-top" id="offCanvasTop" data-off-canvas data-position="top">top</div> <div class="off-canvas-content" data-off-canvas-content> <div class="wrap"> <main> <aside> <br/> <br/> <br/> <button type="button" class="button" data-toggle="offCanvasLeft">Left</button> <button type="button" class="button" data-toggle="offCanvasRight">Right</button> </aside> <article style="overflow-x:scroll;overflow-y:auto;"> <div class="row" id="primary_nav"> <p>Title</p> </div> <div class="row" id="secondary_nav"> <div class="large-12 columns"> <div> <ul> <li><a href="#/menu1" class="active">Menu1</a></li> <li><a href="#/menu2">Menu2</a></li> <li><a href="#/menu3">Menu3</a></li> </ul> </div> </div> </div> <div class="row"> <div class="large-8 columns" id="container"> <table style="width:5000px;"> <tr> <td> This is an example of a page which shows the Foundation off-canvas behavior. Only it contains content which exceeds the horizontal with of the display. I'd expect the scroll-bar at the bottom of the pane to match the content of the middle panel so tha scrolling would reveal the content. I'd also expect sliding the right panel out to adjust for the extended width of the center panel. This doesn't seem to be the case. </td> </tr> </table> <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow <br/>efwpihfgwofgwofgogfow3gfow </div> </div> </article> </main> </div> </div> </div> </div> 

Answer 1

添加overflow:auto; 對於css中的類.wrap並刪除style="overflow-x:scroll;overflow-y:auto;" 來自html中的article標簽。 我希望這有幫助。