Почему ширина тела не расширяется до ширины его дочерних элементов

Question

Я пытаюсь отобразить много данных, для которых требуется горизонтальная прокрутка.

До меня дошло, что тело не изменяется автоматически по ширине своих детей. Это становится проблемой из-за стиля, требуемого для некоторых других элементов, для которых должен * автоматически изменяться , чтобы соответствовать элементу, который выходит за пределы области просмотра.

К сожалению, он останавливается на ширине тела. Вы могли бы подумать, что body также изменит размер, чтобы соответствовать ширине его дочерних элементов, но это не так.

Как мне сделать так, чтобы тело и / или другие элементы автоматически настраивались? Это происходит в chrome, firefox, edge и ie11

См. скрипка и код:

body {
  border: 1px solid red;
  padding: 1rem;
}

#extra-long {
  background-color: salmon;
  width: 200vw;
}

#other-element {
  background-color: cornflowerblue;
}

<div id="extra-long">This extends beyond the view port</div>
<div id="other-element">This should automatically extend beyond the viewport, but it doesn't</div>

Answer 1

К сожалению, он останавливается на ширине тела.Вы могли бы подумать, что body также изменило бы размер, чтобы соответствовать ширине его дочерних элементов, но это не так.

Вот как блочные элементы работают по умолчанию - заполняя ширину области просмотра.Вам нужен встроенный элемент , который расширяет только его содержимое.

---

Вы можете получить желаемое поведение, используя inline-block - см. Демонстрацию ниже:

body {
  border: 1px solid red;
  padding: 1rem;
  display: inline-block; /* added */
}

#extra-long {
  background-color: salmon;
  width: 200vw;
}

#other-element {
  background-color: cornflowerblue;
}

<div id="extra-long">This extends beyond the view port</div>
<div id="other-element">This should automatically extend beyond the viewport, but it doesn't</div>

---

Вы можете получить тот же эффект, используя контейнер inline-flex column - см. Демонстрацию ниже:

body {
  border: 1px solid red;
  padding: 1rem;
  display: inline-flex; /* added */
  flex-direction: column; /* added */
}

#extra-long {
  background-color: salmon;
  width: 200vw;
}

#other-element {
  background-color: cornflowerblue;
}

<div id="extra-long">This extends beyond the view port</div>
<div id="other-element">This should automatically extend beyond the viewport, but it doesn't</div>

---

И вы также можете использовать width: min-content, но учтите, что это имеет неожиданное усечение поля body вконец - см. демо ниже:

body {
  border: 1px solid red;
  padding: 1rem;
  width: min-content; /* added */
}

#extra-long {
  background-color: salmon;
  width: 200vw;
}

#other-element {
  background-color: cornflowerblue;
}

<div id="extra-long">This extends beyond the view port</div>
<div id="other-element">This should automatically extend beyond the viewport, but it doesn't</div>

Answer 2

Возможно, это стандартное поведение элемента body.Вы можете добавить это правило.

body {
    min-width: min-content;
}

body автоматически подстраивается под содержимое других элементов

Answer 3

Вы не указали ширину для 2-го деления, только цвет фона:

    #other-element {
  background-color: cornflowerblue;
  width: 200vw;
}

Answer 4

вы можете справиться с этим, добавив маленький css в ваш «# extra-long» следующим образом:

<style>
#extra-long{
white-space: nowrap;
}
</style>

добавив выше css, ваш текст всегда будет идти в одну строку, а я прокручиваю автоматически.