CSS - одно деление соответствует размеру, другое деление силы размер

Question

Моя цель - позволить "header-title" и "content" управлять размером div "entity" - в зависимости от того, горизонтальнее ли title или content, сущность подгоняет ширину к большей, но я также хотел бы сделать «заголовок-адрес» сжимается до видимой горизонтальной области. Если заголовок и контент маленькие, я бы хотел, чтобы они отображались только, например, «0x5C9 ...», а также я хочу, чтобы «header-right-side» оставался справа с размером stati c. Кто-нибудь может мне помочь, чтобы стиль работал правильно?

.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

Удалите 500px из ширины в .content, чтобы она не была исправлена. Используйте 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>