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

Question

我正在为左侧菜单的treeview组件工作(见截图):

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

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

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

但它导致水平滚动条:

是否有任何"聪明"的方法使突出显示的区域伸展到容器(左侧面板)？

Answer 1

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

为了获得您想要的结果，每个项目都需要规则：

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

请参阅下面的代码片段了解两个示例：使用 UL/LI 和 DIV's

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>