Ширина div не увеличивается вместе с шириной его родительского контейнера или его содержимого. Здесь нет поплавков. В родительском div установлены overflow:scroll и white-space:pre; все остальное нормально. Идентичное поведение наблюдается в Firefox, IE / Edge, Opera и Chrome.

div.wrapper {
  padding: 1em;
  width: 20em;
  background-color: rgb(240, 240, 240);
  overflow: scroll;
  white-space: pre;
  font-family: monospace;
}
div.line {
  background-color: rgb(200, 200, 200);
}
div.line span.blue {
  color: blue;
}
div.line span.green {
  color: green;
}
<div class='wrapper'>
  <div class='line'>This text is too <span class="blue">long</span> for the wrapper div to <span class="green">contain</span>, so the scroll bar activates.</div>
  <div class='line'>However, the line div's background color fails to <span class="blue">expand</span> with the longer contents, instead ending at the wrapper div's width. Why?</div>
</div>

Цвет фона div.line простирается до ширины div.wrapper на странице. Но когда пользователь прокручивает вправо, текст отображается как обычно, а цвет фона div.line заканчивается.

Мне нужно, чтобы каждый div.line был такой же ширины, как "внутренняя" ширина div.wrapper (чтобы заполнить прокручиваемую область).

Неудачные решения:

  • set overflow:hidden - это скрывает переполненный контент вместо изменения размера div

  • установить overflow:auto - это не имеет значения

  • добавить <div style="clear:both"> </div> - без разницы (без поплавков!)

  • set after:...clear:both - не имеет значения, как указано выше

  • установить высоту для родительских / дочерних элементов - не имеет значения

  • установить width:auto - без разницы

Я исследовал это, пока не заболел мой мозг. Я действительно надеюсь, что упускаю что-то очевидное

3
Michael Galindo 2 Янв 2016 в 05:22

3 ответа

Лучший ответ

Наконец то получил! Это был трудный вопрос, который начинал меня беспокоить, поэтому мне пришлось его решить. Пришлось просто повозиться с некоторыми отображаемыми значениями, пока они не станут правильными. Также в класс линии перемещено свойство white-space. https://jsfiddle.net/0yr0xg35/1/

div.wrapper {
  padding: 1em;
  width: 20em;
  background-color: rgb(240, 240, 240);
  overflow: scroll;
  font-family: monospace;
}
div.line {
  display: table-row;
  white-space: pre;
  background-color: rgb(200, 200, 200);
}
div.line span.blue {
  color: blue;
}
1
Andrew Axton 2 Янв 2016 в 05:02
            div.wrapper {
                padding:1em;
                width:20em;
                background-color:rgb(240,240,240);
                overflow:scroll;
                white-space:pre;
                font-family:monospace;
            }
            div.line {
                background-color:rgb(200,200,200);
                width: 240vh;
            }
            div.line span.blue { color:blue; }
            div.line span.green { color:green; }
<div class='wrapper'>
<div class='line'>This text is too <span class="blue">long</span> for the wrapper div to <span class="green">contain</span>, so the scroll bar activates.  </div>
<div class='line'>However, the line div's background color fails to <span class="blue">expand</span> with the longer contents, instead ending at the wrapper div's width. Why?</div>
</div>

Дайте вашему div немного ширины. Попробуйте использовать: vh или vw вместо%.
Надеюсь, это будет полезно.

0
Chad Trikyas Mooney 2 Янв 2016 в 02:46

Измените ширину на минимальную ширину :

min-width: 20em;

И удалите:

white-space: pre;
-1
user2182349 2 Янв 2016 в 02:52