内容宽度由隐形滚动条更改

Question

注意：帖子的名称是我想要发生的......如果有人找到更好的简短描述，可以稍后编辑

＆GT;我想做什么？

我试图通过在可滚动元素的右侧添加填充来隐藏滚动条。 该元素包含子元素（列表或表）

＆GT;你面临什么问题？

子元素的宽度应该是包含元素的100％，但显然它更少。 右边的空白区域看起来就像是滚动条的位置。

所以我的问题是：

• 为什么会这样？
• 如何让childElement（.inner *）适合其父级的ContentBox？

＆GT;你能重现这个bug吗？

这是一个小提琴，除了我正在谈论的内容之外别无其他： JsFiddle

＆GT;告诉我那段代码！

SIR YES SIR：o）

＆＃13;

＆＃13;

#mainWin {
  overflow: hidden;
}

.container {
  width: 100%;
  padding-right: 40px;
  box-sizing: content-box;
  overflow: auto;
}

.innerContent, .innerTable {
  width: 100%;
}

/* ################################################################ */
/* DO NOT REMOVE */
/* FIXED PROPERTIES */
#mainWin {
  /* Simulate a calculated width (in %) */
  width: 400px;
}
.container {
  /* Arbitrary height of the scroll zone */
  height: 200px;
}
/* DEBUG ¨PROPERTIES */
#mainWin {border: 1px solid #000;}
.container {background: #A55;border: 1px solid #5A5;}
.innerContent, .innerTable {background: #55A;border: 1px solid #D4E200;}
/* END DO NOT REMOVE */
/* ################################################################ */

＆＃13;

<div id="mainWin">
  <div class="container">
    <table class="innerTable">
      <tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr>
    </table>
  </div>
  <hr>
  <div class="container">
    <div class="innerContent">
      test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

PS：我把一些CSS属性分开了（CSS部分的结尾），因为我不认为他们与这个问题有任何关系，似乎我必须得到预期的结果

♥

Answer 1

我找到了一种通过添加一些Javascript来解决我的问题的方法。如果有人有纯CSS解决方案，我希望看到它。

这是添加的Javascript：

function removeScrollBar() {
    $(".container").each(function() {
        var iWidth = $(this).width();
        var child = $(this).find(".innerTable, .innerContent");
        child.css('width',iWidth);
    });
}

$(function() {
    removeScrollBar();
});

<强> Working JsFiddle