如何让flexbox元素根据内容增长但不高于“flex：1”

Question

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

按钮应具有固定高度，如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而不是应用高度，因此它根本不会收缩。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;