Внутренний div не принимает всю ширину прокрутки внешнего div

Question

У меня есть образец с использованием HTML и CSS по следующей ссылке: https://js.do/sun21170/inner-width-not-taking-whole-of-outer-width

Проблема в том, что внутренний div с зеленоватым фоновым цветом не берет всю ширину прокрутки внешнего div.

Вопрос : Есть ли какой-нибудь CSS-код, который я могу использовать для применения стиля внутреннего div для всей ширины прокрутки внешнего div, кроме установки ширины внутреннего div, равной 150%или так?

Пример кода, который я использую, приведен ниже.

<div class="outerDiv">
    <div class="innerDiv">
      This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div  
    </div>
</div>

<style>
.outerDiv {
   max-width:500px;
   border:2px solid purple;
   overflow:auto;
   height: 100px;
}
.innerDiv {
   border:1px dashed red;
   background-color: lightgreen;
   white-space:nowrap;
   width:100%;
}
</style>

Answer 1

Что ж, вы можете сделать, как @andreas предложено выше: ~~

• Добавить display: inline-block к .innerDiv
• Удалить width: 100% из .innerDiv

Или ... Если вы хотите избежать этого эффекта переполнения, вы можете удалить white-space: nowrap из вашего .innerDiv класса!

Один вопрос; Когда у вас 2 .innerDiv, вы хотите, чтобы они складывались друг под другом?Если да, хотите ли вы, чтобы у них обоих был растянутый фон до конца .outerDiv?

РЕДАКТИРОВАТЬ: Ваша проблема была недостаточно ясна для меня вначало, но теперь я понял, чего вам действительно нужно достичь, и вот 2 решения:

# 1 Решение: table-row

.outerDiv {
   max-width:500px;
   border:2px solid purple;
   overflow:auto;
   height: 100px;
}
.innerDiv {
   display: table-row; /* <-- Add this */
   border:1px dashed red;
   background-color: lightgreen;
   white-space:nowrap;
}

<div class="outerDiv">
    <div class="innerDiv">
      This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div  
    </div>
     <div class="innerDiv">
      This is inner div This is inner div This is inner div   
    </div>
</div>

---

# 2 Решение: Relative & Absolute позиция!

ПРИМЕЧАНИЕ: Может использоваться без position: relative и position: absolute, просто используйте display: inline-block в .wrapperDiv, и оно будет таким же!

.outerDiv {
   position: relative; /* <-- Add this */
   max-width:500px;
   border:2px solid purple;
   overflow:auto;
   height: 100px;
}
.wrapperDiv { 
   position: absolute; /* <-- Add this */
}
.innerDiv {
   border:1px dashed red;
   background-color: lightgreen;
   white-space:nowrap;
}

<div class="outerDiv">
   <div class="wrapperDiv"> <!-- Add This -->
    <div class="innerDiv">
      This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div  
    </div>
     <div class="innerDiv">
      This is inner div This is inner div This is inner div   
    </div>
   </div>
</div>

Надеюсь, вы найдете это полезным!

Answer 2

Да, просто установите .innerDiv на display: inline-block;.Таким образом, .innerDiv ведет себя как встроенный элемент, который всегда так же широк, как и его содержимое, если вы не укажете width.

Вот рабочий пример:

.outerDiv {
   max-width:500px;
   border:2px solid purple;
   overflow:auto;
   height: 100px;
}
.innerDiv {
   display: inline-block; /* ← this does the trick */
   border:1px dashed red;
   background-color: lightgreen;
   white-space:nowrap;
   /* width: 100%; ← this has to be removed */
}

<div class="outerDiv">
    <div class="innerDiv">
      This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div  
    </div>
</div>