Question

我有一个对话框：

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

当前，如果大框的内容（表示应该滚动的内容）太长，则会使整个对话框滚动。我不希望这样，我希望在不使整个窗口滚动的情况下滚动框的内容，如下所示：

我该怎么做？

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>

使弹性项目的内容滚动而不是使容器更高

1 个答案: