Question

当我遇到一些嵌套的flex-box时，我陷入了困境，无法使内容正确滚动。这是我的CSS：

html,body,#root{
   width:100%;
   height:100%;
   padding:0;
   margin:0;
}
.flex-fill{
   height:100%;
   width:100%;
   display:flex;
   align-items:stretch;
}
.flex-fill>div:last-child{
   flex-grow:1;
}
.flex-col{
   flex-direction:column;
}

<div id='root'>
  <div class='flex-fill flex-col'><!--actually scrolling div-->
     <div style="flex:0 0 35px"><h1>main title</h1></div>
     <div>
        <div class='flex-fill flex-col'>
           <div style="flex:0 0 30px"><h2>subtitle</h2></div>
           <div class='flex-fill'>
              <div style="flex:0 0 30%">...left side nav list...</div>
              <div class='flex-fill flex-col'>
                 <div style="flex:0 0 25px">...data header...</div>
                 <!--I hope the content of this div is scroll-able-->
                 <div style="overflow-y:scroll">...data list...</div>
              </div>
           </div>
        </div>
     </div>
  </div>
</div>

最里面的div中包含的数据列表很长，我想使其可滚动。但实际上，以上代码使root div滚动的全部内容成为现实。我是否对flex或溢出有误解？如何固定其他部分，仅滚动数据列表？

Answer 1

答案已更新，以使您的HTML结构保持不变。内联样式已删除并添加为类：

private void Test_Click(object sender, RoutedEventArgs e)
{
    ModelTextView nd = DataContext as ModelTextView;
    nd.Ricevi(Send.Text);
    this.Close();
}

html,body{
   height:100%;
   padding:0;
   margin:0;
}
#root {
  height: 100%;
	display: flex;
}
.flex-fill{
   height:100%;
   display:flex;
   align-items:stretch;
}
.flex-col{
   flex-direction:column;
   display: flex;
   flex: 1 0 0;
   height: 100%;
}
.flex-row{
   flex-direction:row;
   display: flex;
   height: 100%;
}
.scrolling-div {
	height: 100%;
	overflow-y: scroll;
}

Answer 2

@Welson Zhong，请查看下面的工作片段，请在Full page视图中查看，希望现在对您有所帮助：）

注意：过多的flex会杀死flex;），这就是代码的问题。

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
  font-size: 18px;
}
.main {
  display: flex;
  flex-direction: row;
  flex: 1 0 auto;
}
.sidebar {
  flex: 1 auto;
}
.content {
  display: flex;
  flex-flow: column nowrap;
  flex: 3 0px;
}
h1,h2,.data-header {
  flex: none;
}

/* below css is for visual purpose only */
.main *:not(.content) {
  box-shadow: inset 0 0 0 1px #ccc;
  padding: 10px;
}

<h1>main title</h1>
<h2>sub title</h2>
<div class="main">
  <div class="sidebar">
    ...left side nav list...
  </div>
  <div class="content">
    <div class="data-header">...data header...</div>
    <div style="overflow-y:scroll; flex: auto">...data list...</div>
  </div>
</div>

如何正确使弹性框子级滚动

2 个答案: