For instance:
HTML
console.log($('.container').width()); // 600px as we defined in css.
console.log($('.list').width()); // 600px
console.log($('.box').eq('-1').position().left + $('.box').outerWidth());body{padding:0;margin:0;}
.container {
width: 600px;
background:#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;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>There are 10 boxes, each with a width of 100px. The actual width of the .list element should be 1000px, not 600px.
I attempted to use the following method to obtain the actual width of the list: The left position of the last child element and its outerWidth.
console.log($('.box').eq('-1').position().left + $('.box').outerWidth());
What I'm curious about is if there is a more efficient way to get the actual width of this type of flexbox element? Are there any better built-in JavaScript or jQuery methods for this?