在CSS / HTML中将树视图项宽度拉伸到父容器

Question

我正在使用左侧菜单的treeview组件（见截图）：

树视图中的所有项目都必须是可选的。我为项目设置了宽度100％，当我选择突出显示区域的树宽度中的项目小于左侧面板时：

但突出显示区域的宽度等于左侧面板的宽度。我知道可以通过对突出显示区域的边距和填充操作来实现，例如：

{
margin: 0 -400px;
padding: 0 400px;
} 

但它会导致水平滚动条：

有没有＆＃34;聪明＆＃34;如何突出显示区域伸展到容器（左侧面板）？

Answer 1

当width: 100%和/或max-width: 100%某些人（如LI）没有时，每个孩子都应该适合其父母。

要获得结果，您希望每个项目都需要规则：

• white-space: nowrap（所以它不会换行到下一行）
• overflow: hidden（删掉多余的文字）
• width: 100%（伸展到父母）

有关两个示例，请参阅下面的代码：使用UL / LI和DIV的

html,
body {
  /*UPDATE*/
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  overflow: hidden
}
*,
*:before,
*:after {
  box-sizing: inherit
}
/* { outline: 1px dotted red } /* for debug */

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.side-panel {
  max-width: 200px;
  padding: 4px;
  border: 1px solid rgba(0, 0, 0, .2)
}
ul,
.treeview {
  max-width: 100%;
  text-align: right;
}
li,
.item {
  height: 23px; /*ADD*/
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  margin: 5px 0; /*ADD*/
}
li:hover,
.item:hover { /*ADD*/
  height: 23px;
  text-align: left;
  border: 1px dashed cornflowerblue;
  cursor: pointer
}
li:nth-child(even),
.item:nth-child(odd) {
  background: rgba(0, 255, 0, 0.1)
}
li:nth-child(odd),
.item:nth-child(even) {
  background: rgba(0, 0, 255, 0.1)
}

<div class="side-panel">
  <h3>example with UL/LI</h3>
  <ul>
    <li>some item 1</li>
    <li>some item 2</li>
    <li>some item 3</li>
    <li>some item 4fgdfg g</li>
    <li>some item 5 sad d fd</li>
    <li>some item 6 sdtresertg zdf dfsfd</li>
    <li>some item 7</li>
  </ul>
</div>
<div class="side-panel">
  <h3>example with DIV's</h3>
  <div class="treeview">
    <div class="item">some item 1</div>
    <div class="item">some item 2</div>
    <div class="item">some item 3</div>
    <div class="item">some item 4fgdfg g</div>
    <div class="item">some item 5 sad d fd</div>
    <div class="item">some item 6 sdtresertg zdf dfsfd</div>
    <div class="item">some item 7</div>
  </div>
</div>