如何在vertical flex-item上使用overflow-y：auto？

Question

这是fiddle。 这是 HTML

<div class="overflow">
  <div class="block">
    <div class="header">
      This is green header
    </div>
    <div class="content">
      this is a lot of content<br> this is a lot of content<br> this is a lot of content<br> this is a lot of content<br> this is a lot of content<br> this is a lot of content<br>
      <button>
      add more
      </button>
    </div>
  </div>
</div>

和 CSS

.overflow {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,.8);
}
.block {
  width: 100px;
  background: white;
  max-width: calc(100% - 30px);
  max-height: calc(100% - 30px);
}
.header {
  background: green;
  flex: 0 0 auto;
}
.content {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
}

问题是如果内容足够长以超出模态，它不会添加滚动条，而是溢出.content div。

我尝试使用min-height:0;，但没有帮助。

Answer 1

＆＃13;

＆＃13;

$(document).ready(function(){
	$('button').click(function(){
  	$('.content').append('some more content<br>');
  });
});

＆＃13;

.overflow{
     position: absolute;
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     background: rgba(0,0,0,.8);
    }
    .block{
     width: 100px;
     background: white;
     max-width: calc(100% - 30px);
 
    }
    .header{
     background: green;
     flex: 0 0 auto;
    }
    .content{
     float:  left;
     clear: left;
     overflow-y: auto;
     max-height: 350px;
   
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="overflow">
  <div class="block">
    <div class="header">
      This is green header
    </div>
    <div class="content">
      this is a lot of content<br> this is a lot of content<br> this is a lot of content<br> this is a lot of content<br> 
      <button>
      add more
      </button>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

经过一段时间后，我能够弄清楚这个尝试，这给了我在这里给出的内容的最大高度。希望它会有所帮助。试试看，让我知道

在达到最大高度350px后它将成为scrolabe你可以自己设置

Answer 2

试试这个

.overflow{
  position: absolute;
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,.8);
}
.block{
  width: 100px;
  background: white;
  max-width: calc(100% - 30px);
  max-height: calc(100% - 30px);
}
.header{
  background: green;
  flex: 0 0 auto;
}
.content{
  min-height: 0;
  overflow-y: auto;
  text-overflow: clip;
  flex: 1 1 auto;
  background: #fff;
}

现场演示 - Why there is no circuiting when these operators are overloaded

Answer 3

感谢所有在这个问题中所说的，这帮助我找到了错误。我忘了将display: flex; flex-direction: column添加到.block。

以下是工作示例：

.overflow{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,.8);
}
.block{
  display: flex;
  flex-direction: column;
  width: 100px;
  background: white;
  max-width: calc(100% - 30px);
  max-height: calc(100% - 30px);
}
.header{
  background: green;
  flex: 0 0 auto;
  height: 50px;
}
.content{
  //min-height: 0;
  overflow-y: auto;
  text-overflow: clip;
  flex: 1 1 auto;
}