Элемент внутри переполнения автоматического контейнера имеет правильную ширину (для всех комбинированных дочерних элементов) - PullRequest
Новая
       7

Элемент внутри переполнения автоматического контейнера имеет правильную ширину (для всех комбинированных дочерних элементов)

0 голосов
/ 09 мая 2019

У меня есть оболочка <div> с фиксированной шириной и внутренним <div>, который содержит список из нескольких элементов, которые вместе шире родительского <div>.

Как только содержимое становится шире, чем оболочка <div>, я хочу вертикальную полосу прокрутки.

Это работает очень хорошо, но, к сожалению, внутренняя <div> просто имеет такую ​​же ширинукак моя обёрткаэлементы списка переполняют внутренний <div>, но когда я устанавливаю цвет фона для внутреннего <div>, он виден только для этой ширины оболочки <div>.

Я хочу внутренний <div>иметь ту же ширину, что и его дочерние элементы.

У кого-нибудь есть идеи, как решить эту проблему?

Вот пример кода: 

.slider-wrapper {
  width: 500px;
  background: grey;
  overflow: auto;
}

.slider-pane {
  background: yellow;
  padding: 20px 0;
}

ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  width: 100%;
  background: red;
}
  
li {
  width: 100px;
  height: auto;
  padding: 20px 0;
  flex-shrink: 0;
}
<div class="slider-wrapper">
  <div class="slider-pane">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
    </ul>
  </div>
</div>

Ссылка на легко редактируемый jsfiddle: https://jsfiddle.net/gcx9zws2/

Как видно из примера, красный ижелтый фон оканчивается на ширину элемента обертки.Но мне нужна такая же ширина как все элементы списка вместе.Я не знаю, сколько элементов будет в списке позже, поэтому предпочтительным является чистое решение CSS.

Спасибо за любую помощь.

Приветствия Marco

Ответы [ 2 ]

2 голосов
/ 09 мая 2019

Удалите width:100% из ul (замените на min-width, если хотите, чтобы элемент имел ширину не менее 100%, если элементов меньше), и сделайте его inline-flex вместо flex.

А для div.slider-pane установите display: inline-block, если вы хотите, чтобы желтый также рос.(И снова, при необходимости, добавьте минимальную ширину.) 

.slider-wrapper {
  width: 500px;
  background: grey;
  overflow: auto;
}

.slider-pane {
  display: inline-block;
  background: yellow;
  padding: 20px 0;
}

ul {
  margin: 0;
  padding: 0;
  display: inline-flex;
  list-style: none;
  min-width: 100%;
  background: red;
}
  
li {
  width: 100px;
  height: auto;
  padding: 20px 0;
  flex-shrink: 0;
}
<div class="slider-wrapper">
  <div class="slider-pane">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
    </ul>
  </div>
</div>
0 голосов
/ 09 мая 2019

Я собирался предложить добавить overflow: auto к внутреннему div (.slider-pane) вместо .slider-wrapper. Это позволит внешнему div сохранить правильный размер, но inner div тогда переполнится с помощью ползунка правильно.

Посмотрите эту ручку, если хотите: https://codepen.io/JackofD/pen/LoGNjP

...