Блог

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

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

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

Как мне сделать так, чтобы тело и / или другие элементы автоматически настраивались? Это происходит в 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>  

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

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

Вы можете получить желаемое поведение, используя 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>  

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

 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>  

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

 body {
    min-width: min-content;
}
  

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

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

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

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

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

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