I have some problems with this CSS.

1. How can I make each li’s size increases or decreases according to the label’s size?
2. Also, when the li run to the end of the page’s width, how can I make it wrap to a new row?

For example:

1. Black’s width should be smaller
2. Forest Green’s width should be wider
3. The first row should end at Purple, that’s the width of the page. Rose Pink, Rose Red.. and the rest, should wrap to a new row

HTML

<div class="cable-config clearfix">
  <div><h5>Color:</h5></div>

  <ul class="cable-choose">
    <li>
      <input
        type="radio"
      /><span class="radio-custom-dummy"></span
      ><label class="" for="black">Black</label>
    </li>
    <li>
      <input
        type="radio"
      /><span class="radio-custom-dummy"></span
      ><label class="" for="forest-green">Forest Green</label>
    </li>
    <li>
      <input
        type="radio"
        disabled=""
      /><span class="radio-custom-dummy"></span
      ><label class="sold-out" for="light-purple">Light Purple</label>
    </li>
  </ul>
</div>

For simplicity, I am showing 3 li only in the above HTML.

CSS

.cable-config span {
    font-size: 14px;
    font-weight: 400;
    color: #86939E;
    display: inline-block;
}

.cable-choose {
    list-style-type: none;
    margin: 25px 0 0 0;
    padding: 0;
}

.cable-choose {
    white-space: nowrap;
}

.cable-choose li {
    /* float: left; */
    margin: 15px 5px 0 0;
    width: 100px;
    height: 40px;
    display: inline-block;
    position: relative;
}

.cable-choose label,
.cable-choose input {
    display: block;
    position: absolute;
    /* top: 0; */
    left: 0;
    right: 0;
    bottom: 0;
}

.cable-choose input[type="radio"] {
    opacity: 0.01;
    z-index: 100;
}

.cable-choose input[type="radio"]:checked+label,
.Checked+label {
    background: yellow;  
}

.cable-choose label {
    border: 2px solid #E1E8EE;
    border-radius: 6px;
    padding: 13px 20px;
    font-size: 14px;
    color: #000;
    background-color: #fff;
    cursor: pointer;
    transition: all .5s;
    cursor: pointer;
    z-index: 90;
}

.cable-choose .sold-out {
    color: #ced3d9;
}

.radio-custom:checked ~ label {
    border: 2px solid #121b21;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}