overflow-x ширина дочернего элемента

Question

У меня есть div с overflow-x auto.У этого div есть дочерние элементы, которые шире родительского div, вызывая прокрутку.

Внутренним дочерним элементам присваивается рамка и цвет фона, которые я хотел бы растянуть по всей их ширине, включая переполнение прокрутки.Фактическое содержимое внутренних потомков является динамическим, поэтому я не могу дать им заданную ширину.

.outer {
  border: 1px solid black;
  width: 100px;
  overflow-x: auto;
  white-space: nowrap;
}

.inner {
  border-bottom: 1px solid blue;
  background-color: red;
}

<div class="outer">
  <div class="inner">This is is row number 1</div>
  <div class="inner">This is is row number 2</div>
  <div class="inner">This is is row number 3</div>
</div>

Проблема в том, что это не так - как можно видеть в этой скрипке , фон и граница растягиваются только до определенногоширина родительского элемента.

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

Answer 1

Это просто с JQuery.Используя jquery scrollWidth вы получите ширину прокрутки, которую вы можете просто установить в качестве ширины для внутреннего div.Так что это даст вам ширину прокрутки $('.outer')[0].scrollWidth), просто установите ее как ширину внутреннего div.

$(".inner").css('width', $('.outer')[0].scrollWidth);

.outer {
  border: 1px solid black;
  width: 100px;
  overflow-x: auto;
  white-space: nowrap;
}

.inner {
  border-bottom: 1px solid blue;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
  <div class="inner">This is is row number 1</div>
  <div class="inner">This is is row number 2This is is row number 3 </div>
  <div class="inner">This is is row number 3 This is is row number 3 This is is row number 3 </div>
</div>

Answer 2

Элемент <div> является элементом block, а его ширина будет равна 100% его родительского элемента.Создание элемента inline приведет к растяжению ширины div вместе с его текстовым содержимым, но, к сожалению, потребуется дополнительная разметка, чтобы разбить его на строки (теги <br/>).

я могу сделать это для вашего случая, сделав внутренний контейнер display: table; таким образом, чтобы элемент вел себя как таблица и растянул его ширину, чтобы соответствовать внутреннему тексту.

.outer {
  border: 1px solid black;
  width: 100px;
  overflow-x: auto;
  white-space: nowrap;
}

.inner {
  display: table;
  border-bottom: 1px solid blue;
  background-color: red;
}

Вотдемо: jsFiddle

Answer 3

html: введение внутренней оболочки div

<div class="outer">
  <div class="innerwrapper">
     <div class="inner">This is is row number 1</div>
    <div class="inner">This is is row number 2</div>
    <div class="inner">This is is row number 3 This is is row number 3 This is is row     number 3</div>
  </div>
</div>

css:

.outer {
  border: 1px solid black;
  width: 100px;
  overflow-x: auto;
  white-space: nowrap;
  display:flex;
  flex-wrap:wrap;
  justify-content:stretch;
}

.innerwrapper {
   /* silence is golden */
}

.inner {
  border-bottom: 1px solid blue;
  background-color: red;
}

linky: https://jsfiddle.net/sL0rkjgm/29/

Answer 4

Если вы дадите width больше, чем внешнее, вы получите результат.

Попытайтесь дать width: 200px; или 150%; и дайте мне знать ...

.outer {
  border: 1px solid black;
  width: 100px;
  overflow-x: auto;
  white-space: nowrap;
  display:flex;
  flex-wrap:wrap;
  justify-content:strech;
}

.inner {
  border-bottom: 1px solid blue;
  background-color: blue;
}

<div class="outer">
<div class="container-inner">
  <div class="inner">This is is row number 1</div>
  <div class="inner">This is is row number 2</div>
  <div class="inner">This is is rowfddfssdfdfs number 3</div>
  </div>
</div>

Это нормально?