css - 使用 CSS 设置子级 <div> 的父级 <div> 宽度

Question

我有一个三列标记，其中中间列 #palette( flex 列)具有以下 innerHTML 标记片段

<div id="palette">
<div id="wrapper" style="left: -354px; top: 0px;">
  <div id="colours">
    <ul>
      <li class="swatch"><a tite="Beige" style="background-color:beige;"  class="label" href="javascript:void(0);"><span>&nbsp;</span></a></li>
      <li class="swatch"><a tite="Bisque" ... class="label" href="javascript:void(0);"><span>&nbsp;</span></a></li>
      <li class="swatch"><a tite="Brown" style="background-color:brown;" class="label" href="javascript:void(0);"><span>&nbsp;</span></a></li>
      <li class="swatch"><a tite="Coral" style="background-color:coral;" onclick="setColouringColour(this);" class="label" href="javascript:void(0);"><span>&nbsp;</span></a></li>
      ....
    </ul>
  </div>
  <div id="brush-sizes"> <span style="width:16px; height:16px;" ><span>16</span></a></span> <span class="brush badge" style="width:32px; height:32px;"><a...><span>32</span></a></span> <span class="brush badge" style="width:64px; height:64px;"><a...><span>64</span></a></span> </div>
  <div id="brushes"> <a class="selected btn btn-mini"...>&nbsp;</a> <a class="btn btn-mini">&nbsp;</a> </div>
</div>

以下 CSS 规则适用的地方

#palette {
float: left;
height: 100%;
position: relative;
width: 100%; overflow:hidden;
}
#wrapper {
 display: inline-block;
position: absolute;
top: 0 !important;
white-space: nowrap;
width: auto;
}

Note: #palette is overflow:hidden so that #wrapper can be scrolled using left:*n*px;. The children inside #wrapper are all display:inline-block; clear:none;

我遇到的问题是 #wrapper 不是其子项的“全宽”...因此我似乎无法滚动到最后。

这里问题的根源是什么？我该如何使用CSS ONLY来修复它(是否可以仅通过 CSS 完成？)

Answer 1

显然我需要将剩余的 2 个

之一设置为固定宽度，并尝试适本地设置最大和最小宽度。不知道为什么会这样

关于css - 使用 CSS 设置子级 <div> 的父级 <div> 宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16137830/