Foundation off-canvas scrollbar and content display with wide primary content

Question

I've encountered an issue trying to use the Off-Canvas functionality of Foundation 6.2.0 when the content in the primary display area is overly wide. In most cases, the content will wrap, but if you're displaying content incapable of wrapping (such as a table or an image), I'd expect the horizontal scroll-bar at the bottom of the screen to allow me to scroll sideways to reveal the rest of the content.

This doesn't seem to be the case, and that content is hidden.

Additionally, if the content for the main panel exceeds the screen with, and you're using an offset-canvas that slides in from the right side of the screen, the contents of this panel are hidden my the overlay of the primary panel upon sliding the right-panel open.

I've linked a JSFiddle showing this problem since it renders as I'm seeing it in the browser. I haven't been able to get the Stack Overflow code runner to work properly. Use both the scrollbar on the bottom and the "Right" button to show both problems.

Does anyone know how to get Foundation to accommodate layout when the content of the primary container is wider than the screen, and unable to wrap?

 $(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

Add overflow:auto; for the class .wrap in css and remove style="overflow-x:scroll;overflow-y:auto;" from the article tag in html. I hope this helps.