Pulling TreeView items to parent container in CSS / HTML

Question

I am working on the treeview component for the menu on the left (see screenshot):

All items in the tree view must be selected. I set the width to 100% for the elements, and when I select an element in the width of the tree of the selection, it’s smaller than the left panel:

But the width of the selection will be equal to the width of the left sidebar. I know that this can be achieved by using fields and additions for the selected region, for example:

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

But this leads to a horizontal scrollbar:

Are there any “smart” ways to make the selected area stretched to the container (left panel)?

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>

Hide result