Incorrect scrollWidth on child of flex container

Question

According to w3schools:

The scrollWidth and scrollHeight properties return the entire height and width of an element, including the height and width that is not viewable (because of overflow).

If that's the case, why is the scrollWidth of an element inside a narrower flex parent reported as the visible portion only?

document.body.append("Bar 1 scrollWidth = " + document.getElementById("inner1").scrollWidth);
document.body.appendChild(document.createElement("br"));
document.body.append("Bar 2 scrollWidth = " + document.getElementById("inner2").scrollWidth);

div {
  outline: 1px solid grey;
  margin-bottom: 10px;
}

.outer {
  width: 200px;
  background-color: yellow;
  padding: 3px;
}

.inner {
  width: 300px;
  position: relative;
  display: inline-block;
  background-color: pink;
}

#outer2 {
  display: flex;
  background-color: lightgreen;
}

<div class="outer" id="outer1">
  <div class="inner" id="inner1">Bar 1</div>
</div>

<div class="outer" id="outer2">
  <div class="inner" id="inner2">Bar 2</div>
</div>

I think this is where flex-box is important. It's vitality lies when it comes to how your content is contained within an element, more like avoiding overflowing. It basically ensures that everything is wrapped up within the visible part of the container. And Unfortunately that's how it works... Do you have a use case why you're concerned about the above differences specifically? — Mosia Thabo, Jun 06 '19 at 04:44
Yes I do, hence the question. I need to animate the inner element starting from its original size, 300px, not its visible size (200px). I have a workaround but am looking for confirmation and explanation of this behaviour. — MSC, Jun 06 '19 at 04:47

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

When you use display:flex on some element that acts as a container, the elements inside that container will shrink in width to fit the container's width. This is actually the essence of flexbox and it is important is you want to make a responsive layout.

However, you can use flex-shrink: 0 to prevent this for some particular element, but I'm not sure why you would want that.

Example:

document.body.append("Bar 1 scrollWidth = " + document.getElementById("inner1").scrollWidth);
document.body.appendChild(document.createElement("br"));
document.body.append("Bar 2 scrollWidth = " + document.getElementById("inner2").scrollWidth);

div {
  outline: 1px solid grey;
  margin-bottom: 10px;
}

.outer {
  width: 200px;
  background-color: yellow;
  padding: 3px;  
}

.inner {
  width: 300px;
  position: relative;
  display: inline-block;
  background-color: pink;
}

#outer2 {
  display: flex;
  background-color: lightgreen;
}

#inner2 {
  flex-shrink: 0;
}

<div class="outer" id="outer1">
  <div class="inner" id="inner1">Bar 1</div>
</div>

<div class="outer" id="outer2">
  <div class="inner" id="inner2">Bar 2</div>
</div>

Great, thanks. That explains why the right border was showing on my Bar 2, which struck me as odd at the outset. — MSC, Jun 06 '19 at 05:20

Incorrect scrollWidth on child of flex container

1 Answers1

Example:

Linked