css - 如何让 Flexbox 元素根据内容增长但不超过 "flex: 1"

Question

所以我有一个装有两个 child 的容器。第一个 child 是一个列表，第二个 child 是一个按钮。

按钮应该有一个固定的高度，比如 40px。如果我将列表设置为“flex: 1”，它将增长到消耗容器的所有左侧空间减去按钮在底部使用的 40px。

如何让列表根据其内容增长(就像普通的 div 一样)，但只会增长到最大消耗所有可用空间(如果内容太大则溢出)

这是 html:

.container {
  display: flex;
  height: 300px;
  width: 100px;
  flex-direction: column;
}
.list {
  display: flex;
  flex: 1;
  overflow-y: scroll;
}
.button {
  display: flex;
  height: 40px;
}

<div class="container">
  <div class="list">
    <ul>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
    </ul>
  </div>
  <div class="button">
    View
  </div>
</div>

这是一个例子: https://jsfiddle.net/odrbey4c/

第一个容器中的列表不应占用所有空间。它的行为应该像普通的 div 一样。 第二个容器中的列表很好。

Answer 1

从列表中删除 flex:1...这就是您想要的。

但是，我相信您希望按钮位于容器底部。因此，只需将 margin-top:auto 添加到按钮即可。

哦，将按钮更改为 flex: 0 0 40px 而不是应用高度，这样它就不会收缩。

.container {
  display: inline-flex;
  /* for demo only */
  height: 300px;
  width: 100px;
  flex-direction: column;
  border: 1px solid #ff0000;
}
.list {
  display: flex;
  background: #bbb;
  overflow-y: scroll;
}
.button {
  display: flex;
  flex: 0 0 40px;
  margin-top: auto;
  background: #cccccc;
}

<div class="container">
  <div class="list">
    <ul>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
    </ul>
  </div>
  <div class="button">
    View
  </div>
</div>

<div class="container">
  <div class="list">
    <ul>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
    </ul>
  </div>
  <div class="button">
    View
  </div>
</div>