растяжку элементы TreeView шириной до родительского контейнера в 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-х

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>