CSS - one div fit to the size, other div force size

Question

My goal is to let "header-title" and "content" control the "entity" div size - depending if title or content is horizontally larger, the entity fits width to the larger one, but also I would like to make "header-address" shrink to the visible horizontal area. If title and content is small I would like it to show only for example "0x5C9...", and also I want "header-right-side" to stay on the right side with static size. Can anyone help me to make the style working correctly?

.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

Remove 500px from width in .content, so it will not be fixed. Use flex-grow for the .header-left-side element.
Then, for the .header-address, you have to wrap its content in a <span>. Like this, you can use position relative and absolute, ellipsis and a max-width, so it will work as expected.

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