时间戳

首页 > 解决方案 > 仅在 flexbox 子项内滚动

html - 仅在 flexbox 子项内滚动

问题描述

我是一名 CSS 初学者，我正在尝试使用滚动和弹性框。这是我目前的尝试

body {
  margin: 0;
  height: 100vh; 
}

#root {
  height: 100vh; 
  display: flex; 
  flex-direction: column;
}

header, footer {
  min-height: 50px; 
  background-color:blue; 
  flex: 0 0 auto
}

#main-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  background-color: grey;
}

#main-panel-header {
  height: 20px;
  width: 100%;
  flex: 0 0 auto;
  background-color: red;
  text-align: center;
}

#main-panel-content {
  background-color: orange;  
  overflow-y: auto;
  flex: 1 1 auto;
}

ul {
  list-style-type: none;
  text-align: center;
  line-height: 100px;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 1em;
  color: green;
}
<div id="root">
  <header id="header">Header</header>
  <div id="main-panel">
    <div id="main-panel-header">Main Panel Header 2</div>
    <div id="main-panel-content">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
      </ul>
    </div>
  </div>
  <footer id="footer">Footer</footer>
</div>

我正在尝试进行main-panel-content滚动，并始终保持页眉和页脚可见。现在，滚动发生在整个页面上，而不是我的主面板内容。由于整个设计是灵活的，我不想为主面板使用固定的高度。

有关如何调试此类问题的任何提示？

标签： htmlcssflexboxscrollbar

解决方案

您可以将以下代码添加到#main-panel

overflow-y:scroll;  
display:block;

你可以找到完整的代码：https ://codepen.io/chamman01/pen/poeYMwG

希望你得到你的答案

推荐阅读