在伸缩容器中缩放子元素

Question

我有一个Flex容器，在该容器内，我有2个子元素。这两个子元素的长度都是可变的（内容将是名称和电话号码）。

我想要的是最右边的子容器def clean(self): cleaned_data = super(MyForm, self).clean() # boolean algebra 101: "not A and not B" => "not (A or B)" if not (cleaned_data.get('url1') or cleaned_data.get('url2')): raise ValidationError( _("You should enter at least one URL"), code='no_urls' ) return cleaned_data 始终保持相同的大小。并且子元素elememt旁边的元素impersonation-container应该是椭圆形的，以使phone-control-container不会被推出父容器。

我可以通过将impersonation-container的宽度设置为100％-phone-control-container的宽度来解决此问题。但是我希望使用纯CSS做到这一点。有什么建议吗？

我用问题和解决方案创建了一个带有计算宽度的plunkr：

https://plnkr.co/edit/5gvk7fIHuMIYhbja1qov?p=preview

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

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

  

您必须缩小具有模板的视图。当内容   不再适合该容器，您将在第一个中看到   例如，最右边的元素被推到了容器的外部。

Answer 1

在min-width: 0上添加phone-control-container（弹性项目的默认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>