所以我的应用占据了屏幕宽度/高度的100%。左侧有一个固定宽度的侧边栏,右侧有一个灵活的尺寸div。右边的div在底部有一个固定高度的工具栏,在它上面有一个灵活的高度框。如何确保底部的工具栏在溢出时水平滚动,左边的侧边栏在溢出时垂直滚动?
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>
答案 0 :(得分:1)
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>
此处提供更多信息: