Incorrect Scrollwidth On Child Of Flex Container

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

Solution 1:

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

<divclass="outer"id="outer1"><divclass="inner"id="inner1">Bar 1</div></div><divclass="outer"id="outer2"><divclass="inner"id="inner2">Bar 2</div></div>