Почему ширина тела не увеличивается до ширины его дочерних элементов
Я пытаюсь отобразить много данных, требующих горизонтальной прокрутки.
Я обратил внимание на то, что размер тела не изменяется автоматически по ширине его дочерних элементов. Это становится проблемой из-за стиля, требуемого для некоторых других элементов, чтобы должен автоматически изменялся в размере, чтобы соответствовать элементу, который выходит за пределы области просмотра.
К сожалению, он останавливается на ширине корпуса. Вы могли бы подумать, что 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>
Ответы 4
вы можете управлять этим, добавив небольшой css в свой «#extra-long» следующим образом:
<style>
#extra-long{
white-space: nowrap;
}
</style>
добавив выше css, ваш текст всегда будет идти в одну строку, а я прокручиваю автоматически.
Возможно, это поведение элемента body по умолчанию. Вы можете добавить это правило.
body {
min-width: min-content;
}
body будет автоматически подстраиваться под содержание других элементов
Вы не указали ширину для второго div, просто цвет фона:
#other-element {
background-color: cornflowerblue;
width: 200vw;
}
Это создает проблему, заключающуюся в том, что ширина может быть только 200vw вместо автоматического расширения до ширины содержимого.
Unfortunately, it stops at the width of the body. You would think body would also resize to match the width of its children, but it doesn't.
Вот как блочные элементы работает по умолчанию — заполняя ширину области просмотра. Что вам нужно, так это встроенный элемент, который расширяется ровно настолько, насколько его содержимое.
Вы можете получить желаемое поведение, используя 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>Вы можете получить тот же эффект, используя контейнер встроенный гибкий столбец — см. демонстрацию ниже:
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>Извините за поздний отзыв, который был отслежен другими проектами. Это здорово! Спасибо
Проблема не в переносе текста, а в ширине контейнера. Он автоматически остановится на краю тела, позволяя детям переливаться через край.