title: How to get actual width of a block displayed with flex-direction:column properly?
body: <p>For Example:</p>
  <h3>HTML</h3>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>console.log($('.container').width()); // 600px as we defined in css.
  console.log($('.list').width()); // 600px
  
  console.log($('.box').eq('-1').position().left + $('.box').outerWidth());</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{padding:0;margin:0;}
  .container {
    width: 600px;
    backround:#E1BEE7;
  }
  
  .list {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height:120px;
    background:#FFCDD2;
  }
  
  .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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="container"&gt;
    &lt;div class="list"&gt;
      &lt;div class="box"&gt;1&lt;/div&gt;
      &lt;div class="box"&gt;2&lt;/div&gt;
      &lt;div class="box"&gt;3&lt;/div&gt;
      &lt;div class="box"&gt;4&lt;/div&gt;
      &lt;div class="box"&gt;5&lt;/div&gt;
      &lt;div class="box"&gt;6&lt;/div&gt;
      &lt;div class="box"&gt;7&lt;/div&gt;
      &lt;div class="box"&gt;8&lt;/div&gt;
      &lt;div class="box"&gt;9&lt;/div&gt;
      &lt;div class="box"&gt;10&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>There is 10 boxes, and each box with 100px width, the actual width of element <code>.list</code> should be 1000px not 600px.</p>
  <p>I tried to use the following method to get actual width of list: The left position of last child element and its outerWidth</p>
  <pre><code>console.log($('.box').eq('-1').position().left + $('.box').outerWidth());
  </code></pre>
  <p>What I want to know: is there a better method to get actual width of this kind of flexbox element? some better built-in javascript or jquery method exists for this?</p>