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

Question

我正在开发左侧菜单的树视图组件（见截图）：

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

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

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

但是会导致水平滚动条：

是否有任何“聪明”的方法可以使突出显示的区域延伸到容器（左侧面板）？

Answer 1

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

要得到你想要的结果，每个项目都需要规则：

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

以下 sn-p 有两个示例：使用 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>