Overflow:auto is not working properly with flexbox-CodePudding

I can't get overflow to work properly on .modal-body. When the window is resized the element overflow it's parent .modal when scrollbars should appear.

I only want scrollbars on .modal-body

https://jsfiddle.net/qsawmxg8/3/

<div id="modal">
  <div >
    <div>
      <div >header (no scroll/fixed)</div>
      <div >
        This element should scroll when overflow<br>body<br>body<br>body<br>body<br>body<br>body<br>body<br>body<br>body
      </div>
    </div>
    <div >actions (no scroll/fixed)</div>
  </div>
</div>

#modal{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    display:flex;
}

.modal{
    margin:auto;
    padding:20px;
    max-height:calc(100% - 40px);
    width:500px;
    display:flex;
    flex-flow:column nowrap;
    justify-content:space-between;
    align-items:stretch;
    background:#ddd;
}

.modal-header{
    padding-bottom:10px;
    background:white;
}

.modal-body{
    overflow:auto;
    min-height:60px;
}

.modal-actions{
    padding-top:10px;
    text-align:right;
    background:yellow;
}

CodePudding user response：

You need to set an explicit value on the .modal-body for the height if you want to have a vertical overflow function. I just picked 100px to get it to show but you can set it to whatever you're comfortable with. You could also use max-height as well.

#modal {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
}

.modal {
  margin: auto;
  padding: 20px;
  max-height: calc(100% - 20px);
  width: 500px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: stretch;
  background: #ddd;
}

.modal-body {
  overflow: auto;
  height: 100px;
  min-height: 60px;
}

.modal-actions {
  padding-top: 10px;
  text-align: right;
  background: yellow;
}

<div id="modal">
  <div >
    <div>
      <div>header</div>
      <div >
        body<br>body<br>body<br>body<br>body<br>body<br>body
      </div>
    </div>
    <div >actions</div>
  </div>
</div>

CodePudding user response：

You should add an overflow property on the .modal class. Set it to auto. That fixes it. You can also add a max-height property on the .modal-body to fix it, but I won't suggest it for it won't look good in larger screen heights.