html - 使 flex 元素的内容滚动而不是使容器更高

Question

<分区>

Answer 1

您可以将 max-height 和 overflow-y: auto; 应用于该元素，以防止其高于特定高度并使其仅滚动如果根据其内容有必要:

$(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>