我有一个包含两个窗格的侧边栏.垂直调整窗口大小时，我希望顶部窗格动态调整大小，底部窗格保持固定大小.当侧边栏的总高度小于两个窗格时，我希望顶部窗格缩小到比其内容小，并可滚动.
预期行为与VS代码的侧边栏相同.
当前，调整大小时，顶部窗格会向下"推"底部窗格.
document.addEventListener("DOMContentLoaded", () => {
const listItem = document.querySelector(".top-panel .list-item");
for (let i = 0; i < 25; i++) {
listItem.parentNode.appendChild(listItem.cloneNode(true));
}
});html,
body {
margin: 0;
}
.main {
margin-left: 12rem;
}
.sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 12rem;
display: flex;
flex-direction: column;
justify-content: space-between;
border-right: 1px solid #454545;
}
.top-panel {
flex-shrink: 1;
display: flex;
flex-direction: column;
}
.bottom-panel {
flex-shrink: 0;
display: flex;
flex-direction: column;
}
.header {
background-color: #ababbc;
font-weight: 700;
}
.panel-top .list {
flex-shrink: 1;
overflow-y: auto;
}
.panel-bottom .list {
flex-shrink: 0;
}
.list-item {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}<aside class="sidebar">
<div class="top-panel">
<div class="header">Top panel</div>
<div class="list">
<div class="list-item"><span>https://example.com/users/helloworld</span></div>
<!-- copied 25 times in the JS -->
</div>
</div>
<div class="bottom-panel">
<div class="header">Bottom panel</div>
<div class="list">
<div class="list-item"><span>Lorem</span></div>
<div class="list-item"><span>Ipsum</span></div>
</div>
</div>
</aside>
<main class="main">Main content</main>在代码段中使用"整页"可查看调整大小的行为.