无法使 div 适合弹性高度

Question

我主要使用 Bootstrap，但在这种情况下，纯 CSS 和 Bootstrap 都无法做到这一点。我有一个这样的 HTML：

#filling{
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div>
    <div class="container">
        <div class="row align-items-center mt-3">
            <div class="col-6 text-center">
                <img width="150" height="150" src="img/user-placeholder.svg">
                <p class="mt-2 mb-0">pholder</p>
            </div>
            <div class="col-6">
                <div class="mb-2">
                    <div class="row">
                        <div class="col-6 text-center">pholder</div>
                        <div class="col-6 text-center">pholder</div>
                    </div>
                    <div class="row">
                        <div class="col-6 text-center">Friends</div>
                        <div class="col-6 text-center">Posts</div>
                    </div>
                </div>
                <butto class="btn btn-transparent mt-2">Click</button>
            </div>
        </div>
        <br>
        <p class="text-center m-0">Contents</p>
        <hr class="mt-0 mb-2">
    </div>
    <div id="filling" class="text-center">
        <div class="sample">
             <img width="270" height="270" src="my_img.jpg">
             <p>coding</p>
        </div>
        <div class="sample">
             <img width="270" height="270" src="my_img.jpg">
             <p>coding</p>
        </div>
        <div class="sample">
             <img width="270" height="270" src="my_img.jpg">
             <p>coding</p>
        </div>
    </div>
</div>

---

现在的问题是：#filling div 必须动态填充，我希望它的行为类似于 Android 编程中的 ListView。我必须能够滚动它。因此我添加了一些 CSS：

#filling{
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}

但是，如果我通过添加像这三个 .sample div 这样的子元素来填充 div，则列表会垂直增长，但 #filling div 也会如此。换句话说，它'迫使我滚动整个页面而不仅仅是 div。

我希望我已经清楚了，这肯定会被标记为任何 flex 问题的副本，但我希望收到一个可行的解决方案，因为除了固定 div 的高度之外，比如说，在 250px 我找不到“响应式”的方式来做到这一点。

Answer 1

我创建了一个快速解决方案，将#filling div 的max-heigth 设置为50%. 请注意，您需要将所有外部容器的高度设置为 100% 才能正常工作。

JSBin 链接：https://jsbin.com/nofobak/edit?html,css,output

<div id="my-container">
    <div class="container h-40">
        <div class="row align-items-center mt-3">
            <div class="col-6 text-center">
                <img width="150" height="150" src="img/user-placeholder.svg">
                <p class="mt-2 mb-0">pholder</p>
            </div>
            <div class="col-6">
                <div class="mb-2">
                    <div class="row">
                        <div class="col-6 text-center">pholder</div>
                        <div class="col-6 text-center">pholder</div>
                    </div>
                    <div class="row">
                        <div class="col-6 text-center">Friends</div>
                        <div class="col-6 text-center">Posts</div>
                    </div>
                </div>
                <butto class="btn btn-transparent mt-2">Click</button>
            </div>
        </div>
        <br>
        <p class="text-center m-0">Contents</p>
        <hr class="mt-0 mb-2">
    </div>
    <div id="filling" class="h-60 text-center">
        <div class="sample">
             <img width="270" height="270" src="my_img.jpg">
             <p>coding</p>
        </div>
        <div class="sample">
             <img width="270" height="270" src="my_img.jpg">
             <p>coding</p>
        </div>
        <div class="sample">
             <img width="270" height="270" src="my_img.jpg">
             <p>coding</p>
        </div>
    </div>
</div>


#filling{
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    max-height: 50%;
}

html {
  height: 100%
}

body {
  height: 100%;
}

#my-container {
  height: 100%;
}

Answer 2

有几件事，h-40 不是 Bootstrap 类，除非您将它作为您制作的自定义类； Bootstrap 的高度实用程序类只是 h-25, h-50, h-75, h-100, h-auto。

正如我的评论和链接的答案中提到的，如果你想使用百分比，你需要有一个固定高度的父级，以便百分比可以作为参考；另一种选择是使用vh 单位来设置相对于视口高度的高度。

Bootstrap 也为此提供了一些utilities

现在您当然需要考虑标题内容

#posts_list {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  max-height: 60vh;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div>
  <div class="container">
    <div class="row align-items-center mt-3">
      <div class="col-6 text-center">
        <img width="150" height="150" src="img/user-placeholder.svg">
        <p class="mt-2 mb-0">pholder</p>
      </div>
      <div class="col-6">
        <div class="mb-2">
          <div class="row">
            <div class="col-6 text-center">pholder</div>
            <div class="col-6 text-center">pholder</div>
          </div>
          <div class="row">
            <div class="col-6 text-center">Friends</div>
            <div class="col-6 text-center">Posts</div>
          </div>
        </div>
        <butto class="btn btn-transparent mt-2">Click</button>
      </div>
    </div>
    <br>
    <p class="text-center m-0">Contents</p>
    <hr class="mt-0 mb-2">
  </div>
  <div id="posts_list" class="h-60 text-center">
    <div class="sample">
      <img width="270" height="270" src="my_img.jpg">
      <p>coding</p>
    </div>
    <div class="sample">
      <img width="270" height="270" src="my_img.jpg">
      <p>coding</p>
    </div>
    <div class="sample">
      <img width="270" height="270" src="my_img.jpg">
      <p>coding</p>
    </div>
  </div>
</div>