html - 我可以为带有空白 :nowrap 的 div 子元素设置百分比宽度吗

Question

全宽的绿色背景，如果我将元素的百分比宽度更改为 px 就可以了!

但我需要它是百分比。

我应该在父溢出 div 中为子元素设置百分比宽度，父元素的宽度也将基于百分比。

.frame {
   overflow-x: scroll;
}

.pane {
   white-space: nowrap;
   display: inline-block;
   background:green;
}

.item {
   display: inline-block;
   width: 18%;
   height: 50px;
   background-color: grey;
}

<div class="frame">
   <div class="pane">
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div> 
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div>            
   </div>
</div>

Answer 1

考虑使用视口(viewport)宽度和视口(viewport)高度而不是百分比

检查这个片段

.frame {
   overflow-x: scroll;
}

.pane {
   white-space: nowrap;
   display: inline-block;
   background:green;
}

.item {
   display: inline-block;
   width: 18vw;
   height: 50px;
   background-color: grey;
}

<div class="frame">
   <div class="pane">
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div> 
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div>
      <div class="item project-col"></div>            
   </div>
</div>

希望对你有帮助