Reputation: 720
So I have an app that takes up 100% width/height of the screen. There is a fixed width sidebar on the left, and a flexible size div on the right. The div on the right has a fixed height toolbar on the bottom and a flexible height box above it. How can I make sure the toolbar on the bottom scrolls horizontally when overflowed, and the sidebar on the left scrolls vertically when overflowed?
html,
body,
.my-app {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
background: red;
}
.my-app {
display: flex;
flex-direction: row;
}
.sidebar {
background: brown;
width: 300px;
}
.map-container {
flex: 1;
display: flex;
flex-direction: column;
}
.map {
background: blue;
flex: 1;
}
.toolbar {
height: 300px;
background: green;
}
<div class="my-app">
<div class="sidebar">
<p>
Sidebar fixed width of 300px;
</p>
</div>
<div class="map-container">
<div class="map">
<p>
Map should grow to fill available space horizontally and vertically
</p>
</div>
<div class="toolbar">
<table class="large-table">
<tr>
<td>Content should scroll and be 300px</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
</table>
</div>
</div>
</div>
https://jsfiddle.net/tvsgthb7/
Upvotes: 1
Views: 345
Reputation: 372079
html, body, .my-app {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
background: red;
}
.my-app {
display: flex;
flex-direction: row;
}
.sidebar {
background: orange;
/* width: 300px; */
flex: 0 0 300px; /* makes 300px width inflexible with flex-shrink: 0 */
overflow: auto;
}
.sidebar > p {
height: 1000px;
}
.map-container {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0; /* allows flex item to shrink past its content size */
}
.map {
background: aqua;
flex: 1;
}
.toolbar {
height: 300px;
background: lightgreen;
overflow: auto;
}
<div class="my-app">
<div class="sidebar">
<p>
Sidebar fixed width of 300px;
</p>
</div>
<div class="map-container">
<div class="map">
<p>
Map should grow to fill available space horizontally and vertically
</p>
</div>
<div class="toolbar">
<table class="large-table">
<tr>
<td>Content should scroll and be 300px</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
</table>
</div>
</div>
</div>
More information here:
Upvotes: 1