Неправильная ширина прокрутки на дочернем элементе гибкого контейнера

Question

Согласно w3schools :

Свойства scrollWidth и scrollHeight возвращают всю высоту и ширину элемента, включаявысота и ширина, которые нельзя просмотреть (из-за переполнения).

Если это так, то почему scrollWidth элемента внутри более узкого flex родитель сообщается только как видимая часть?

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>

Answer 1

Когда вы используете display:flex для некоторого элемента, который действует как контейнер, элементы внутри этого контейнера будут сужаться по ширине, чтобы соответствовать ширине контейнера.Это на самом деле сущность flexbox, и важно, чтобы вы хотели создать адаптивный макет.

Однако вы можете использовать flex-shrink: 0 , чтобы предотвратить это для некоторых конкретныхэлемент, но я не уверен, почему вы хотели бы этого.

Пример:

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>