内部div不采用外部div的整个滚动宽度

Question

我在以下链接中有使用html和CSS的示例：https://js.do/sun21170/inner-width-not-taking-whole-of-outer-width

问题是背景色为绿色的内部div不能占据外部div的整个滚动宽度。

问题：除了将内部div的宽度设置为150％左右以外，是否可以使用一些CSS来使内部div样式应用于外部div的整个滚动宽度？

我正在使用的示例代码如下。

<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

是的，只需将.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>

Answer 2

好吧，您可以按照上面建议的@andreas进行操作：~~

• 将display: inline-block添加到.innerDiv
• 从width: 100%移除.innerDiv

或者...如果要避免这种溢出效应，可以从white-space: nowrap类中删除.innerDiv！

一个问题； ；当您有2个.innerDiv时，您是否希望它们彼此堆叠？如果是这样，您是否要让两个背景的背景都延伸到.outerDiv的末尾？

编辑：一开始，您的问题对我来说还不够清楚，但是现在我已经了解了您真正需要实现的目标，这里有两种解决方案：

＃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即可！< / p>

.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 3

您还可以通过添加以下内容，将flex box用于外部容器：

display: flex;
flex-direction: column;
align-items: flex-start;

工作示例：

.outerDiv {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 500px;
  overflow: auto;
}

.innerDiv {
  background-color: lightgreen;
  white-space: nowrap;
}

.innerDiv2 {
  background-color: lightpink;
  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="innerDiv2">
    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>