html - 创建可伸缩的 flex child

Question

我有一个容器元素，它可以包含数量可变的子元素，我想缩放这些子元素的宽度。

我设置了一个简单的 plunker:

https://plnkr.co/edit/ef0AGPsK7FJJyBqgWuMi?p=preview

在这个 plunker 中，您可以缩小 DOM，name 和 number 元素将使用它们的省略号来适应父元素中的内容。这很好。

但是当您放大 DOM 时，您会看到子元素被展开，因此它们在父元素上平分。这是因为 flex: 1。但我希望容器元素是正确显示内容所需的最大宽度，而不是填满父容器元素。

/* Styles go here */

.conversation-container {
  display: flex;
  width: calc(100% - 20px);
  border: 1px solid black;
  background-color: green;
  padding: 10px;
}

.conversation-container .conversation-holder {
  flex: 1;
  background-color: yellow;
  padding: 5px;
  border: 1px solid white;
  margin-right: 5px;
}

.conversation-container .conversation-holder .name {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
  width: 50%;
  display: inline-block;
}

.conversation-container .conversation-holder .number {
  float: left;
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
  width: 50%;

}

.conversation-container1 {
  display: flex;
  width: calc(100% - 20px);
  border: 1px solid black;
  background-color: green;
  padding: 10px;
}

.conversation-container1 .conversation-holder {

  background-color: yellow;
  padding: 5px;
  border: 1px solid white;
  margin-right: 5px;
}

.conversation-container1 .conversation-holder .name {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
  width: 50%;
  display: inline-block;
}

.conversation-container1 .conversation-holder .number {
  float: left;
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
  width: 50%;

}

<h1>Scalable content using flex, example 1</h1>
  <div class="conversation-container">
    <div class="conversation-holder">
      <span class="name">Namefrom Someone</span>
      <span class="number">555666444213321</span>
    </div>
    <div class="conversation-holder">
      <span class="name">Namefrom Someone</span>
      <span class="number">555666444123123</span>
    </div>
    <div class="conversation-holder">
      <span class="name">Namefrom Someone</span>
      <span class="number">555666444123321</span>
    </div>
  </div>
  
  <h1>Scalable content using flex, example 2</h1>
  <div class="conversation-container1">
    <div class="conversation-holder">
      <span class="name">Namefrom Someone</span>
      <span class="number">555666444213321</span>
    </div>
    <div class="conversation-holder">
      <span class="name">Namefrom Someone</span>
      <span class="number">555666444123123</span>
    </div>
    <div class="conversation-holder">
      <span class="name">Namefrom Someone</span>
      <span class="number">555666444123321</span>
    </div>
  </div>

Answer 1

您可以添加flex: 0 1 auto(告诉它不要增长但收缩没问题，并设置flex- basis 属性到auto)到你的conversation-holder(如果你想可能min-width: 0缩小 coversation-holder 更多)。

现在 name 和 number 上都没有 width: 50% 并且 floating number 元素，您可以在 conversation-holder 上使用 row-reverse flexbox。请参阅下面的演示:

.conversation-container {
  display: flex;
  width: calc(100% - 20px);
  border: 1px solid black;
  background-color: green;
  padding: 10px;
}

.conversation-container .conversation-holder {
  flex: 0 1 auto; /* CHANGED */
  min-width: 0; /* ADDED */
  background-color: yellow;
  padding: 5px;
  border: 1px solid white;
  margin-right: 5px;
  /* ADDED BELOW */
  display: flex;
  flex-direction: row-reverse;
}

.conversation-container .conversation-holder .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* width: 50%; */
  display: inline-block;
}

.conversation-container .conversation-holder .number {
  /* float: left; */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* width: 50%; */
}

<div class="conversation-container">
  <div class="conversation-holder">
    <span class="name">Namefrom Someone</span>
    <span class="number">555666444213321</span>
  </div>
  <div class="conversation-holder">
    <span class="name">Namefrom Someone</span>
    <span class="number">555666444123123</span>
  </div>
  <div class="conversation-holder">
    <span class="name">Namefrom Someone</span>
    <span class="number">555666444123321</span>
  </div>
</div>