How to get actual width of a block displayed with

Question

For Example:

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

<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 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 width of list: The left position of last child element and its outerWidth

console.log($('.box').eq('-1').position().left + $('.box').outerWidth());

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?

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

<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!

Answer 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/

Answer 3

What I need is just el.scrollWidth.