CSS-一个div适合大小，其他div力大小

Question

我的目标是让“标题标题”和“内容”控制“实体”的div大小-根据标题或内容在水平方向上的大小，实体将宽度适合较大的实体，但我也想使“标头地址”缩小到可见的水平区域。如果标题和内容很小，我希望仅显示“ 0x5C9 ...”，并且我也希望“页眉右侧”以静态大小保留在右侧。谁能帮我使样式正确运作？

.entity {
  display: inline-block;
  border: solid 1px blue;
}

.header {
  width: 100%;
  display: inline-block;
  box-sizing: border-box;
  border: solid 1px blue; display:flex; flex-direction:row;  
}

.header-left-side {
  display: inline-block;
  flex-direction: column;
  border: solid 1px red;
}

.header-right-side {
  border: solid 1px red;
  width: 120px;
}

.header-title {
  border: solid 1px red;
}

.header-address {
  border: solid 1px red;
  text-overflow: ellipsis;
  width: calc(100%);
  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}

.content {
  border: solid 3px green;
  width: 500px;
}

<div class="entity">
  <div class="header">
    <div class="header-left-side">
      <div class="header-title">
        My contract title
      </div>
      <div class="header-address">
        0x5C9cD4dDF6F1f4008C7Da7377451223F1503FAc6
      </div>
      <div class="header-address">
        0x179397aabe842d4725bc8aa300772FB6D6969568
      </div>
    </div>

    <div class="header-right-side">
      <button>min</button><button>c</button><button>options</button>
    </div>
    
  </div>
  <div class="content">
    bbfffffffffbbfffffffffbbfffffffffbbfffffffffbbfffffffff
  </div>
</div>

Answer 1

从.content的宽度中删除500像素，因此它不会被固定。将flex-grow用于.header-left-side元素。然后，对于.header-address，您必须将其内容包装在<span>中。这样，您可以使用相对位置和绝对位置，省略号和最大宽度，因此可以正常使用。

.entity {
  display: inline-block;
  border: solid 1px blue;
}

.header {
  width: 100%;
  box-sizing: border-box;
  border: solid 1px blue;
  display: flex;
  flex-direction: row;  
}

.header-left-side {
  display: inline-block;
  flex-direction: column;
  border: solid 1px red;
  flex-grow: 1;
}

.header-right-side {
  border: solid 1px red;
  width: 120px;
}

.header-title {
  border: solid 1px red;
}

.header-address {
  border: solid 1px red;
  text-overflow: ellipsis;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  height: 18px; // required because of the absolute position of the span
}

.header-address span {
  overflow: hidden;
  position: absolute;
  display: block;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.content {
  border: solid 3px green;
}

<div class="entity">
  <div class="header">
    <div class="header-left-side">
      <div class="header-title">
        My contract title
      </div>
      <div class="header-address">
        <span>0x5C9cD4dDF6F1f4008C7Da7377451223F1503FAc6</span>
      </div>
      <div class="header-address">
        <span>0x179397aabe842d4725bc8aa300772FB6D6969568</span>
      </div>
    </div>

    <div class="header-right-side">
      <button>min</button><button>c</button><button>options</button>
    </div>
    
  </div>
  <div class="content"> bbfffffffffbbfffffffffbbfffffffffbbfffffffffbbfffffffff
  </div>
</div>