html - 在包装按钮列表之前收缩

Question

我在 flex 容器中有一个按钮列表。这是jsfiddle example .

.container {
  display: flex;
  flex-grow: 1;
  background: grey;
  padding: 10px;
}


.btn-container {
  min-width: 50px;
  display: flex;
  background: red;
  padding: 10px;
}


.container>button {
  flex-wrap: nowrap;
  background: blue;
  color: white;
}

.btn-container button {
  min-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="container">
  <div class="btn-container">
  <Button>
    hello world
  </Button>
  <Button>
    hello hello hello world
  </Button>
  <Button>
    hello hello hello world
  </Button>
  <Button>
    hello hello hello world
  </Button>
  </div>
  <button>
    Button adder
  </button>
</div>

我试图让按钮先缩小显示椭圆，然后在缩小屏幕宽度后折叠。

在示例中，按钮仅缩小。当我添加 flex-wrap: wrap至 .btn-container它们只包裹而不收缩。那么如何在包装前让它们收缩呢？

注意:在换行时，我需要按钮的长度不要超过它们的实际宽度。

谢谢

Answer 1

您可以使用 flex-basis:0 来近似结合 flex-grow .我也靠max-width: max-content;限制增长效应:

.container {
  display: flex;
  flex-grow: 1;
  background: grey;
  padding: 10px;
}

.btn-container {
  min-width: 50px;
  display: flex;
  background: red;
  padding: 10px;
  flex-wrap: wrap;
}

.container>button {
  background: blue;
  color: white;
}

.btn-container button {
  min-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-basis:0;
  flex-grow:1;
  max-width: max-content;
}

<div class="container">
  <div class="btn-container">
    <Button>
    hello world
  </Button>
    <Button>
    hello hello hello world
  </Button>
    <Button>
    hello hello hello world
  </Button>
    <Button>
    hello hello hello world
  </Button>
  </div>
  <button>
    Button adder
  </button>
</div>