How To Get Actual Width Of A Block Displayed With Flex-direction:column Properly?

For Example: HTML There is 10 boxes, and each box with 100px width, the actual width of element .list should be 1000px not 600px. I tried to use the following method to get actual

Solution 1:

What I need is just el.scrollWidth.

Solution 2:

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(
  "<p>totalWidth: " + totalWidth + "</p>"
);

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 = "<p>totalWidth: " + totalWidth + "</p>";

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

Solution 3:

As you've discovered, scrollWidth will provide you the dimension you're looking for. The reason that outerWidth isn't giving you the total width of the internal elements is that your .list element is actually 600px wide. The additional content is overflowing its parent, allowing it to display despite being outside of the .list.

You can test this by changing the overflow property to hidden on .list:

body{ padding:0; margin:0; }
.container {
  width: 600px;
}

.list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 120px;
  background: #FFCDD2;
  overflow: hidden;
}

.box {
  margin:10px;
  flex-shrink:0;
  flex-grow:0;
  flex-basis:auto;
  width: 100px;
  height: 100px;
  text-align:center;
  line-height:100px;
  background: #F44336;
  color:#FFF;
  font-size:2rem;
}

.result{
  padding:1rem;
}

<div class="container">
  <div class="list">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
    <div class="box">10</div>
  </div>
</div>

Note that when you run this, the .list element clips the remaining boxes.

Hopefully this helps you understand what is going on in addition to solving the problem for you. Cheers!