CSS: переполнение блочных элементов не полностью соответствует стилю

Question

Я пытался найти ответ на свой вопрос, но не могу его найти.Может быть, я не знаю, как спросить.Вот пример кода:

ul{
  background: rgba( 255, 0, 0, 0.1 );
}
li {
  width: auto;
  white-space: nowrap;
}
li.selected {
  background: #ccccff;
}

<ul>
  <li>
    LINE 1
    <ul>
      <li>
        LINE 1-1
        <ul>
        </ul>
      </li>
      <li>
        LINE 1-2
        <ul>
        </ul>
      </li>
    </ul>
  </li>
  <li class="selected">
    LINE 2 | LINE 2 | LINE 2 | LINE 2 | LINE 2 | LINE 2 | LINE 2 | LINE 2 | LINE 2 | LINE 2
    <ul></ul>
  </li>
  <li>
    LINE 3
    <ul>
      <li>
        LINE 3-1
        <ul>
        </ul>
      </li>
      <li class="selected">
        LINE 3-2 | LINE 3-2 | LINE 3-2 | LINE 3-2 | LINE 3-2 | LINE 3-2 | LINE 3-2 | LINE 3-2
        <ul>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    LINE 4
    <ul></ul>
  </li>
  <li>
    LINE 5
    <ul></ul>
  </li>
</ul>

Как сделать так, чтобы цвет фона доходил до конца самого длинного элемента li?Есть ли хитрость?Если я изменю li на display: inline-block, то цвета достигнут конца, но короткие элементы li будут на одной строке.Это нежелательно.

Есть идеи, как решить эту проблему?

ОБНОВЛЕНО ...

Работает, но я не знаю, почему именно.

<ul>
    <li>
        <div>
            <span>Item ...</span>
        </div>
        <ul>
            [CHILD LI ELEMENTS ...]
        </ul>
    </li>
</ul>

или версия без элемента div дает желаемый результат.Цвет фона элемента устанавливается полностью вправо.

div#tree {
	position: fixed;
	top: 2em;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.5em;
	overflow: scroll;
}

ul{
	margin: 0;
	padding: 0;
}
ul ul {
	margin: 0 0 0 1em;
}

li {
	width: auto;
	margin: 0;
	padding: 0;
	white-space: nowrap;
	list-style: none;
}

span {
	display: inline-block;
	padding: 0.25em;
	background: #336633;
	border: 0;
}
li.selected > div > span {
	background: #333366;
}

<div id="tree">
	<ul>
		<li>
			<div>
				<span>Root</span>
      </div>
      <ul>
        <li>
          <div>
            <span>ITEM 1</span>
          </div>
          <ul>
            <li>
              <div>
                <span>ITEM 1-1</span>
              </div>
              <ul></ul>
            </li>
            <li>
              <div>
                <span>ITEM 1-2 | ITEM 1-2 | ITEM 1-2 | ITEM 1-2 | ITEM 1-2</span>
              </div>
              <ul>
              </ul>
            </li>
          </ul>
				</li>
        <li>
          <div>
            <span>ITEM 2</span>
				</div>
 			<ul></ul>
		</li>
	</ul>

Извините за все неприятности.Спасибо.

Answer 1

ul{
  background: rgba( 255, 0, 0, 0.1 );
display:inline-block;
}
ul ul{
  display: block;
}
li {
  width: auto;
  white-space: nowrap;
}
li.selected {
  background: #ccccff;
}

<ul>
  <li>
    LINE 1
    <ul>
      <li>
        LINE 1-1
        <ul>
        </ul>
      </li>
      <li>
        LINE 1-2
        <ul>
        </ul>
      </li>
    </ul>
  </li>
  <li class="selected">
    LINE 2 | LINE 2 | LINE 2 | LINE 2 | LINE 2 | LINE 2 | LINE 2 | LINE 2 | LINE 2 | LINE 2
    <ul></ul>
  </li>
  <li>
    LINE 3
    <ul>
      <li>
        LINE 3-1
        <ul>
        </ul>
      </li>
      <li class="selected">
        LINE 3-2 | LINE 3-2 | LINE 3-2 | LINE 3-2 | LINE 3-2 | LINE 3-2 | LINE 3-2 | LINE 3-2
        <ul>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    LINE 4
    <ul></ul>
  </li>
  <li>
    LINE 5
    <ul></ul>
  </li>
</ul>

Или

Если для всех UL требуется одинаковый стиль, используйте ниже.

ul{
 display: table;
 width: 100%;
 box-sizing: border-box;
}

Answer 2

Один из лучших способов добиться этого - обновление ниже css,

li {
    overflow-x: auto;
}
/* width */
li::-webkit-scrollbar {
    height:5px;
}
/* Track */
li::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
}
/* Handle */
li::-webkit-scrollbar-thumb {
    background: red; 
}

ul{
  background: rgba( 255, 0, 0, 0.1 );
}
li {
  width: auto;
  white-space: nowrap;
    overflow-x: auto;
}
/* width */
li::-webkit-scrollbar {
    height:5px;
}
/* Track */
li::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
}
/* Handle */
li::-webkit-scrollbar-thumb {
    background: red; 
}
li.selected {
  background: #ccccff;
}

<ul>
  <li>
    LINE 1
    <ul>
      <li>
        LINE 1-1
        <ul>
        </ul>
      </li>
      <li>
        LINE 1-2
        <ul>
        </ul>
      </li>
    </ul>
  </li>
  <li class="selected">
    LINE 2 | LINE 2 | LINE 2 | LINE 2 | LINE 2 | LINE 2 | LINE 2 | LINE 2 | LINE 2 | LINE 2
    <ul></ul>
  </li>
  <li>
    LINE 3
    <ul>
      <li>
        LINE 3-1
        <ul>
        </ul>
      </li>
      <li class="selected">
        LINE 3-2 | LINE 3-2 | LINE 3-2 | LINE 3-2 | LINE 3-2 | LINE 3-2 | LINE 3-2 | LINE 3-2
        <ul>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    LINE 4
    <ul></ul>
  </li>
  <li>
    LINE 5
    <ul></ul>
  </li>
</ul>

Answer 3

вы можете использовать

li, 
li ul{
  background:rgba( 255, 0, 0, 0.1 );
}