How to get actual width of a block displayed with flex-direction:column properly?

Answer 1

Probably more code than you wanted, but you could just sum the width of the elements inside the div, using javascript with jQuery like this:

var totalWidth = 0;
$('.box').each(function() {
  totalWidth += $(this).width();

});

$('#msg').html(
  "
totalWidth: " + totalWidth + "
"
);

with a live example: https://jsfiddle.net/yeeqkd2e/4/

or without jQuery

var totalWidth = 0;

var cont = document.getElementsByClassName('box');
for (var i = 0, len = cont.length; i < len; i++) {
    totalWidth += cont[i].offsetWidth;
}

document.getElementById('msg').innerHTML = "
totalWidth: " + totalWidth + "
";

Native Javascript: https://jsfiddle.net/yeeqkd2e/6/