CSS: подгонка ширины к контенту или оболочке - в зависимости от того, что шире

Question

Итак, у меня есть набор элементов списка, и я пытаюсь выделить курсор мыши, чтобы они выглядели правильно.Вот HTML:

<div id="wrapper">
  <div id="box">
    <div class="item">Lorem ipsum dolor sit amet, sit nonumy utamur ponderum ex</div>
    <div class="item">Eu liber libris sit, qui aeque primis an</div>
  </div>
</div>

Затем я даю оболочку overflow: auto.Таким образом, если элементы списка слишком длинные, оболочка разрешит горизонтальную прокрутку:

#wrapper {
  overflow: auto;
}

А вот JSFiddle, с которым я работаю:https://jsfiddle.net/codesmith32/e9se5120/

---

Теперь моя цель такова:

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

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

---

По умолчанию, вариант 1. работает нормально, и выделение растягивается, когда элементы не вызывают горизонтальную прокрутку.Но когда они слишком длинные, выделение простирается только на ширину окна, но не на ширину элементов, что приводит к неудаче. Случай 2.:

Кажется, я обнаружил, что установка display: flex на обертке приведет к тому, что ширина элементов будет соответствовать тексту и будет правильно выделяться, когда они вызывают горизонтальную прокрутку.Однако тогда он не растягивается на всю ширину окна, когда элементы не генерируют горизонтальную прокрутку, неудачный случай 1.:

Я также думал, что если дать элемент #box min-width: 100%, то он будет по крайней мере такой ширины.Но вместо этого он работает для случая 1., а не для случая 2. опять же, несмотря на display: flex.

обертки. Есть идеи?

Answer 1

Используйте flex-grow: 1 на дочернем элементе оболочки.https://jsfiddle.net/3p9kyu7v/1/

#wrapper {
  width: 100%;
  height: 300px;
  overflow: auto;
  border: 1px solid #808080;
  /* remove * to toggle -> */
  display: flex;
  /**/
}
#box {
  flex-grow: 1;
  padding: 10px;
}