My webpage is structured with a sidebar and content section, using flex display with the sidebar set to 0.15 flex and the content set to 0.85 flex. I want this page to be full width of the viewport.
The issue arises when I try to incorporate a table into the content section. I want the table to fit within its parent div, the content section, and have a horizontal scroll bar if the table exceeds the width of the container.
Currently, the table causes the content section to stretch horizontally, which is not the desired behavior. I want the ability to resize the window, and have the table shrink accordingly.
For an example, please refer to this JSFiddle link: http://jsfiddle.net/kopwmsuq/7/
Here is a snippet of my code:
.page {
width: 100%;
height: 100%;
display: flex;
}
.sidebar {
flex: 0.15;
background-color: red;
}
.content {
flex: 0.85;
background-color: blue;
display: flex;
flex-direction: column;
text-align: center;
}
.step-content {
flex: 1;
}
.step-footer {
display: block;
}
table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
button {
display: block;
} <div class="page">
<div class="sidebar">
// sidebar buttons
</div>
<div class="content">
<div class="step-content">
whatever
<div>
<table>
// BIG TABLE THAT STRETCHS WHOLE PAGE CONTENT
</table>
</div>
</div>
<div class="step-footer">
</div>
</div>
</div>