div container floats outside of parent container

Question

I´m currently trying to create some kind of tab component. It all works fine, if the text inside the label tags is short enough to get displayed inside the content div. If the text is too long, the text gets shortened with ellipsis. But if this happens, the x icon floats out of the parent div.

How to fix this behaviour, so that the x stays in the component div without limiting the labels to a fix size? the reason behind this is, that the icon shcould only appear, if the mouse is hovered over the tab. otherwise the label should reach all the way to the right side. I know how to to this stuff. The only problem currently is the falsy displayed x icon.

.example {
  display: flex;
  flex-direction: column;
}

.component {
  max-width: 250px;
  min-width: 100px;
  width: auto;
  height: 40px;
  background-color: grey;
  cursor: default;
  display: flex;
  flex-direction: row;
}

.line {
    width: 2px;
    min-width: 2px;
    height: 30px;
    background-color: black;
    margin-top: 5px;
}

.content {
    height: 100%;
    width: 100%;
    padding: 7px 10px 7px 5px;
}

.label {
  line-height: 13px;
    font-size: 13px;
    height: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #c4c7cc;
    width: 100%;
}

.icon {
    color: black;
    float: left;
    margin-right: 7px;
    cursor: pointer;
    height: 10px;
    min-width: 10px;
    width: 10px;
}

<div class="example">
  Example with short Text
  <div class="component">
    <div class="line"></div>
    <div class="content">
      <div class=label>aaaaaaaa</div>
      <div class=label>bbbbbbbb</div>
    </div>
    <div class="icon">X</div>
  </div>
  
  <br>
  Example with long Text
  <div class="component">
    <div class="line"></div>
    <div class="content">
      <div class=label>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
      <div class=label>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbnnnnnnnnnnnnnn</div>
    </div>
    <div class="icon">X</div>
  </div>
</div>

Answer 1

Just Need to add overflow: hidden; On the .content class

.example {
  display: flex;
  flex-direction: column;
}

.component {
  max-width: 250px;
  min-width: 100px;
  width: auto;
  height: 40px;
  background-color: grey;
  cursor: default;
  display: flex;
  flex-direction: row;
}

.line {
    width: 2px;
    min-width: 2px;
    height: 30px;
    background-color: black;
    margin-top: 5px;
}

.content {
    height: 100%;
    width: 100%;
    padding: 7px 10px 7px 5px;
    overflow: hidden;
}

.label {
  line-height: 13px;
    font-size: 13px;
    height: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #c4c7cc;
    width: 100%;
}

.icon {
    color: black;
    float: left;
    margin-right: 7px;
    cursor: pointer;
    height: 10px;
    min-width: 10px;
    width: 10px;
}

<div class="example">
  Example with short Text
  <div class="component">
    <div class="line"></div>
    <div class="content">
      <div class=label>aaaaaaaa</div>
      <div class=label>bbbbbbbb</div>
    </div>
    <div class="icon">X</div>
  </div>
  
  <br>
  Example with long Text
  <div class="component">
    <div class="line"></div>
    <div class="content">
      <div class=label>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
      <div class=label>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbnnnnnnnnnnnnnn</div>
    </div>
    <div class="icon">X</div>
  </div>
</div>

Answer 2

You don't need to float the .icon element, it's better to position it as absolute (look at my css code below). To do this the .component division has to be positioned as relative. Once you've positioned the container as relative it will be the reference for the coordinates for the absolute positioned element .icon.

.icon {

    position: absolute;
    top: 0;
    right: 0;

    color: black;
    /*float: left;*/
    margin-right: 7px;
    cursor: pointer;
    height: 10px;
    min-width: 10px;
    width: 10px;
}
.component {

  position:relative; /*add this here*/

  max-width: 250px;
  min-width: 100px;
  width: auto;
  height: 40px;
  background-color: grey;
  cursor: default;
  display: flex;
  flex-direction: row;
}

Answer 3

make the component position relative and the icon position absolute then set the right value to the icon .

like this:

.component {
  max-width: 250px;
  min-width: 100px;
  width: auto;
  height: 40px;
  background-color: grey;
  cursor: default;
  display: flex;
  flex-direction: row;
position:relative;
}

.icon {
    color: black;
    float: left;
    margin-right: 7px;
    cursor: pointer;
    height: 10px;
    min-width: 10px;
    width: 10px;
    position:absolute 
    right:2px;
}

to prevent text from appearing behind the X u can apply padding to the component class

.component{
padding-right:25px;
}