html - 在伸缩容器中缩放子元素

This question already has an answer here:

Why don't flex items shrink past content size?
（1个答案）
8个月前关闭。
我有一个flex容器，在这个容器中有两个子元素。两个子元素的长度都是可变的（内容包括姓名和电话号码）。
我想要的是最右边的子容器总是保持相同的大小。它旁边的子元素impersonation-container中的元素应该是椭圆的，这样phone-control-container就不会被推出父容器。
我可以通过将impersonation-container的宽度设置为100%phone-control-container的宽度来解决这个问题。但我希望用纯CSS来实现这一点。有什么建议吗？
我创建了一个包含问题和计算宽度的解决方案的plunkr：
https://plnkr.co/edit/5gvk7fIHuMIYhbja1qov?p=preview

.grid-holder {
  display: grid;
  grid-template-columns: 100%
}

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

.grid-holder .conversation-container .conversation-holder {
  flex: 0 1 auto;
  min-width: 0;
  background-color: yellow;
  padding: 5px;
  border: 1px solid white;
  margin-right: 5px;
  display: flex;
}

.grid-holder .conversation-container .conversation-holder span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

.grid-holder .conversation-container .impersonation-container {
  flex: 1!important;
  margin-left: auto;
  background-color: yellow;
  padding: 5px;
  border: 1px solid white;
  margin-right: 5px;
}

.grid-holder .conversation-container .impersonation-container empy {
  display: flex;
}

.grid-holder .conversation-container .phone-control-container {
  width: 100%;
}

.grid-holder .conversation-container .phone-control-container empty {
  width: 100%;
}

.grid-holder .conversation-container .phone-control-container empty .double-container {
  display: flex;
}


.grid-holder1 {
  display: grid;
  grid-template-columns: 100%
}

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

.grid-holder1 .conversation-container .conversation-holder {
  flex: 0 1 auto;
  min-width: 0;
  background-color: yellow;
  padding: 5px;
  border: 1px solid white;
  margin-right: 5px;
  display: flex;
}

.grid-holder1 .conversation-container .conversation-holder span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

.grid-holder1 .conversation-container .impersonation-container {
  flex: 1!important;
  margin-left: auto;
  background-color: yellow;
  padding: 5px;
  border: 1px solid white;
  margin-right: 5px;
}

.grid-holder1 .conversation-container .impersonation-container empy {
  display: flex;
}

.grid-holder1 .conversation-container .phone-control-container {
  width: calc(100% - 160px);
}

.grid-holder1 .conversation-container .phone-control-container empty {
  width: 100%;
}

.grid-holder1 .conversation-container .phone-control-container empty .double-container {
  display: flex;
}

<h1>Scalable content using flex, example 1, issue with shrinking the DOM</h1>
  <div class="grid-holder">
    <div class="conversation-container">
      <div class="phone-control-container">
        <empty>
          <div class="double-container">
            <div class="conversation-holder">
              <p>X</p>
              <span class="name">Namefrom Someone</span>
              <span class="number">555666444213321</span>
              <p>X</p>
            </div>
            <p>X</p>
            <div class="conversation-holder">
              <span class="name">Namefromasdasd eone</span>
              <span class="number">555666444123123</span>
            </div>
          </div>
        </empty>
      </div>
      <div class="impersonation-container">
        <empy>
          <span>something</span>
          <span>button</span>
          <span>button</span>
        </empy>
      </div>
    </div>
  </div>

  <h1>Scalable content using flex, example 2, fixed DOM shrinking issue but using hard coded values in the width</h1>
  <div class="grid-holder1">
    <div class="conversation-container">
      <div class="phone-control-container">
        <empty>
          <div class="double-container">
            <div class="conversation-holder">
              <p>X</p>
              <span class="name">Namefrom Someone</span>
              <span class="number">555666444213321</span>
              <p>X</p>
            </div>
            <p>X</p>
            <div class="conversation-holder">
              <span class="name">Namefromasdasd eone</span>
              <span class="number">555666444123123</span>
            </div>
          </div>
        </empty>
      </div>
      <div class="impersonation-container">
        <empy>
          <span>something</span>
          <span>button</span>
          <span>button</span>
        </empy>
      </div>
    </div>
  </div>

必须收缩包含模板的视图。当内容
已经不适合这个容器了，你会在第一个里看到的
最右边的元素被推到容器外面。

最佳答案

在min-width: 0上添加phone-control-container（flex items的默认min-width: auto将您的impersonation-container推出容器）-请参见下面的演示：

.grid-holder {
  display: grid;
  grid-template-columns: 100%
}

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

.grid-holder .conversation-container .conversation-holder {
  flex: 0 1 auto;
  min-width: 0;
  background-color: yellow;
  padding: 5px;
  border: 1px solid white;
  margin-right: 5px;
  display: flex;
}

.grid-holder .conversation-container .conversation-holder span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

.grid-holder .conversation-container .impersonation-container {
  flex: 1!important;
  margin-left: auto;
  background-color: yellow;
  padding: 5px;
  border: 1px solid white;
  margin-right: 5px;
}

.grid-holder .conversation-container .impersonation-container empy {
  display: flex;
}

.grid-holder .conversation-container .phone-control-container {
  width: 100%;
  min-width: 0; /* ADDED */
}

.grid-holder .conversation-container .phone-control-container empty {
  width: 100%;
}

.grid-holder .conversation-container .phone-control-container empty .double-container {
  display: flex;
}


.grid-holder1 {
  display: grid;
  grid-template-columns: 100%
}

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

.grid-holder1 .conversation-container .conversation-holder {
  flex: 0 1 auto;
  min-width: 0;
  background-color: yellow;
  padding: 5px;
  border: 1px solid white;
  margin-right: 5px;
  display: flex;
}

.grid-holder1 .conversation-container .conversation-holder span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

.grid-holder1 .conversation-container .impersonation-container {
  flex: 1!important;
  margin-left: auto;
  background-color: yellow;
  padding: 5px;
  border: 1px solid white;
  margin-right: 5px;
}

.grid-holder1 .conversation-container .impersonation-container empy {
  display: flex;
}

.grid-holder1 .conversation-container .phone-control-container {
  width: calc(100% - 160px);
}

.grid-holder1 .conversation-container .phone-control-container empty {
  width: 100%;
}

.grid-holder1 .conversation-container .phone-control-container empty .double-container {
  display: flex;
}

<h1>Scalable content using flex, example 1, issue with shrinking the DOM</h1>
  <div class="grid-holder">
    <div class="conversation-container">
      <div class="phone-control-container">
        <empty>
          <div class="double-container">
            <div class="conversation-holder">
              <p>X</p>
              <span class="name">Namefrom Someone</span>
              <span class="number">555666444213321</span>
              <p>X</p>
            </div>
            <p>X</p>
            <div class="conversation-holder">
              <span class="name">Namefromasdasd eone</span>
              <span class="number">555666444123123</span>
            </div>
          </div>
        </empty>
      </div>
      <div class="impersonation-container">
        <empy>
          <span>something</span>
          <span>button</span>
          <span>button</span>
        </empy>
      </div>
    </div>
  </div>

  <h1>Scalable content using flex, example 2, fixed DOM shrinking issue but using hard coded values in the width</h1>
  <div class="grid-holder1">
    <div class="conversation-container">
      <div class="phone-control-container">
        <empty>
          <div class="double-container">
            <div class="conversation-holder">
              <p>X</p>
              <span class="name">Namefrom Someone</span>
              <span class="number">555666444213321</span>
              <p>X</p>
            </div>
            <p>X</p>
            <div class="conversation-holder">
              <span class="name">Namefromasdasd eone</span>
              <span class="number">555666444123123</span>
            </div>
          </div>
        </empty>
      </div>
      <div class="impersonation-container">
        <empy>
          <span>something</span>
          <span>button</span>
          <span>button</span>
        </empy>
      </div>
    </div>
  </div>

关于html - 在伸缩容器中缩放子元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55024346/