I have successfully implemented a flexbox layout with fixed header, fixed footer, fixed menu, and scrolling content based on resources from various articles and Stack Overflow answers.
However, I am facing difficulty in achieving horizontal scrolling for the content section. Despite trying to force a width on each container, the horizontal scrollbar keeps appearing at the body level. The application of overflow: auto on the .layout-content-content div was expected to allow both horizontal and vertical overflowing, but CSS seems to pose a challenge in this aspect.
If you need more insight into the issue, please refer to the corresponding codepen link: https://codepen.io/cosmo0/pen/vaZbGL
html,
body,
.layout-container {
height: 100%;
width: 100%;
}
body {
margin: 0;
}
.layout-container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.header,
.footer {
height: 50px;
flex: 0 0 auto;
}
.layout-body {
flex: 1 1 auto;
display: flex;
}
.layout-menu {
flex: 0 0 auto;
width: 300px;
overflow: auto;
}
.layout-content {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.layout-content-title {
flex: 0 0 auto;
height: 50px;
}
.layout-content-content {
flex: 1 1 auto;
overflow: auto;
}
/* This snippet is used to simulate a large data table */
.large {
width: 10000px;
border: 1px solid #ccc;
}<div class="layout-container">
<div class="header">Header</div>
<div class="layout-body">
<div class="layout-menu">
<ul>
<li>Menu contents</li>
</ul>
</div>
<div class="layout-content">
<div class="layout-content-title">Page title</div>
<div class="layout-content-content">
<div class="large">This content is too large</div>
<p>Content content.</p>
</div>
</div>
</div>
<div class="footer">Footer </div>
</div>