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

Answer 1

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;
}

  

    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8
    
9
    
10
  

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!