缩放弹性容器中的子元素[重复]

Posted

技术标签:

【中文标题】缩放弹性容器中的子元素[重复]【英文标题】：Scale child element in flex container [duplicate] 【发布时间】：2019-07-28 04:36:12 【问题描述】：

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

我想要的是最右边的子容器impersonation-container 始终保持相同的大小。并且它旁边的子元素 phone-control-container 中的元素应该是椭圆形，这样 impersonation-container 就不会被推出父容器。

我可以通过将phone-control-container 的宽度设置为 100% - impersonation-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>

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

【问题讨论】：

您必须缩小具有模板的视图。当内容不再适合容器时，您会看到在第一个示例中，最右边的元素被推到容器之外。 【参考方案1】：

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

【讨论】：

以上是关于缩放弹性容器中的子元素[重复]的主要内容，如果未能解决你的问题，请参考以下文章

flex布局

弹性布局属性

## 弹性盒子属性介绍

弹性盒模型

弹性盒子之骰子六面

CSS弹性盒子布局flex