CSS + Bootstrap: How to dynamically stretch subdiv width to fit container (with image)?

Question

I have a problem where I have a dynamic part of my page where I might have 1,2,3 or 4 subdivs (look below at the pink arrows). As you can see in the first facebook section, the divs don't stretch out. I want it to be in thirds. If there are only 2, then it should be in halves, and take up the whole width of the container.

How would I do this?

HTML:

<div class="channel-box">
  <div class="facebook-engagements">
    <img src='blah.img' title="Facebook" />
    <span class="small-stats-font">123</span>
  </div>
  <div class="channel-breakdown clearfix row-fluid">
    <div class="channel-units">
      <img src='blah.img' title="Post" />
      <span class="smaller-stats-font">123</span>
    </div>
    <div class="channel-units">
      <img src='blah.img' title="Like" />
      <span class="smaller-stats-font">123</span>
    </div>
    <div class="channel-units">
      <img src='blah.img' title="Share" />
      <span class="smaller-stats-font">
        123
      </span>
    </div>
  </div>
</div>

CSS:

      .channel-breakdown {
        border-top: 1px solid gray;

        .channel-units {
          border-right: 1px solid gray;
          display: inline-block;
          float: left;
          margin-right: 10px;
          width: 23%;
        }
      }

Answer 1

CSS flexbox to the rescue! Flex is awesome and supported by modern browsers.

• MDN guide
• CSS-tricks guide

.channel-breakdown {
  border-top: 1px solid gray;
  display: flex;

  .channel-units {
    border-right: 1px solid gray;
    margin-right: 10px;
    flex: 1;
  }
}

"use strict";

document.addEventListener("click", function (e) {
  if (e.target.nodeName === "BUTTON") {
    let div = document.createElement("div");
    div.textContent = parseInt(Math.random() * 100, 10);
    
    document.querySelector(".flex").appendChild(div);
  } else if (/\bflex\b/.test(e.target.parentNode.className)) {
    e.target.remove();
  }
});

.flex div {
  text-align: center;
  border: 1px solid black;
  margin: 0;
  flex: 1;
}

.flex {
  border: 1px solid black;
  display: flex;
}

<button>Click to add another div</button>
<p>Click on a box to remove it</p>

<div class="flex">
  <div>12</div>
  <div>34</div>
  <div>56</div>
</div>

Answer 2

CSS tables are the answer here I feel.

   .channel-breakdown {
     border-top: 1px solid gray;
     display: table;
     table-layout: fixed;
     width: 100%;
   }
   .channel-units {
     border-right: 1px solid gray;
     display: table-cell;
   }