Bootstrap 4 Beta 2. How To Make Equal Width Li Inside Different Col Which Are Stretched To Screen Width?

I've spent much time, but can't get it work. As you can see on fiddle, I have three main blocks (light gray), and multiple number of blocks inside. I need those little dark blocks

Solution 1:

use this jQuery code:

var totalLi = $('.thisBlock li').length;

$('.thisBlock .c').each(function(index, element){
    var cLi = $(element).find('li').length;
    $(element).css({'flex-basis':cLi/totalLi *100 +'%'})
})

https://jsfiddle.net/acLx1mod/