父级中的div高度溢出[重复]

Posted 2023-03-05

【中文标题】父级中的div高度溢出[重复]

【英文标题】：div height overflow in parent [duplicate]

【发布时间】：2021-09-07 08:03:00

【问题描述】：

我有 2 个标签，每个标签都显示为 flex。我的需要是如果#myTabContent溢出.main-panel由于列表，我只想要列表上的滚动条，而不是整个div。 通过这种方式，#myTabContent 永远不会溢出。

这里是带有行为的JSFiddle，以及以下sn-p：

.main-panel
  background: lightblue;
  height: 300px;

#myTabContent 
  margin: 5px;
  color: white;
  background: #0007;

#myTabContent > div 
  display: none;

#myTabContent .active 
  display: flex;
  flex-flow: column;
  height: 100%;


.data-main 
  display: flex;
  flex-flow: row;

.data-left 
  flex: 0 1 150px;
  background: #a007;

.data-right 
  flex: 1 1 auto;
  background: #0a07;

.list-group 
  overflow-y: auto;

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<div class="main-panel">
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="data-tab" data-toggle="tab" href="#data" role="tab" aria-controls="data" aria-selected="true">Data</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="preview-tab" data-toggle="tab" href="#preview" role="tab" aria-controls="preview" aria-selected="false">Preview</a>
    </li>
  </ul>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="data" role="tabpanel" aria-labelledby="data-tab">
      <h3>Data</h3>
      <div class="data-main">
        <div class="data-left">
          <h4>Tabs</h4>
          <ul class="list-group">
            <li class="list-group-item list-group-item-action py-1">a</li>
            <li class="list-group-item list-group-item-action py-1">b</li>
            <li class="list-group-item list-group-item-action py-1">c</li>
            <li class="list-group-item list-group-item-action py-1">d</li>
            <li class="list-group-item list-group-item-action py-1">e</li>
            <li class="list-group-item list-group-item-action py-1">f</li>
          </ul>
        </div>
        <div class="data-right">
          <h4>Sections</h4>
        </div>
      </div>
    </div>
    <div class="tab-pane fade" id="preview" role="tabpanel" aria-labelledby="preview-tab">
      <h3>Preview</h3>
    </div>
  </div>
</div>

【问题讨论】：

在您的 CSS 中添加 3 行代码。 jsfiddle.net/2cnaw0L1

@MichaelBenjamin，感谢您的帮助，但在最好的情况下，我只想将滚动条添加到列表中

啊，明白了。再多几行。 jsfiddle.net/0cgpfrtk

@MichaelBenjamin，非常感谢，以你为例，我只申请了名单:)

【参考方案1】：

你不能简单地设置父容器有这个属性吗？：

身高：适合内容

这应该始终强制您的父容器与子容器一样高。

【讨论】：

我的问题正好相反，我不希望子 div 溢出我的父 div