Make contents of flex item scroll instead of making container taller [duplicate]

问题

I have a dialog box:

$(document).ready(function() {
  $('.ui.modal').modal('show');
});

        .content {
            display: flex !important;
            flex-direction: column;
        }
                    
        .ui.modal > .content > .scroll {
            flex: 1;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.7.6/dist/semantic.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.7.6/dist/semantic.min.js"></script>


<div class="ui overlay fullscreen modal">
  <div class="header">
    Dialog box
  </div>
  <div class="content">
    <div class="ui warning message">
      <div class="header">
        Be careful
      </div>
      This is a warning message
    </div>
    <div class="scroll ui segment">This box should scroll when the contents are too long.</div>
  <div class="ui segment">Part of the dialog box</div>
  </div>
  <div class="actions">
    <div class="ui approve button">Save</div>
    <div class="ui cancel button">Cancel</div>
  </div>
</div>

Currently, if the contents of the large box (the one that says that it should scroll) are too long, then it will make the entire dialog box scroll. I don't want this, I want the contents of the box to scroll without making the entire window scroll, like this:

How can I do that?

回答1:

You can apply a max-height and overflow-y: auto; to that element to not let it get any higher than a certain height and make it scroll only if necessary due to its contents:

$(document).ready(function() {
  $('.ui.modal').modal('show');
});

.content {
  display: flex !important;
  flex-direction: column;
}

.ui.modal>.content>.scroll {
  flex: 1;
}
.scroll.ui.segment {
  max-height: 120px;
  overflow-y: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.7.6/dist/semantic.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.7.6/dist/semantic.min.js"></script>


<div class="ui overlay fullscreen modal">
  <div class="header">
    Dialog box
  </div>
  <div class="content">
    <div class="ui warning message">
      <div class="header">
        Be careful
      </div>
      This is a warning message
    </div>
    <div class="scroll ui segment">This box should scroll when the contents are too long. This box should scroll when the contents are too long. This box should scroll when the contents are too long. This box should scroll when the contents are too long. This box should scroll when
      the contents are too long. This box should scroll when the contents are too long. This box should scroll when the contents are too long. This box should scroll when the contents are too long. This box should scroll when the contents are too long.
      This box should scroll when the contents are too long. This box should scroll when the contents are too long. This box should scroll when the contents are too long. This box should scroll when the contents are too long. This box should scroll when
      the contents are too long. This box should scroll when the contents are too long. This box should scroll when the contents are too long. This box should scroll when the contents are too long. This box should scroll when the contents are too long.
      This box should scroll when the contents are too long. This box should scroll when the contents are too long.</div>
    <div class="ui segment">Part of the dialog box</div>
  </div>
  <div class="actions">
    <div class="ui approve button">Save</div>
    <div class="ui cancel button">Cancel</div>
  </div>
</div>

来源：https://stackoverflow.com/questions/57421513/make-contents-of-flex-item-scroll-instead-of-making-container-taller

标签

html

css

scroll

flexbox

semantic-ui