使弹性项目的内容滚动而不是使容器更高 [英] Make contents of flex item scroll instead of making container taller

问题描述

我有一个对话框:

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

我该怎么做?

推荐答案

您可以将max-height和overflow-y: auto;应用于该元素，以使其不超过某个特定高度，并仅在必要时使它滚动其内容:

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>

这篇关于使弹性项目的内容滚动而不是使容器更高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！