如何使树视图元素溢出父div的宽度?

I am using bootstrap-treeview to try to make a nice treeview within my MVC project. This control is available on NuGet so its easy to get started with it. The left hand div shows the tree and the right hand div shows the content of each element when clicked:

我正在使用bootstrap-treeview在我的MVC项目中创建一个漂亮的treeview。这个控件在NuGet上是可用的，因此很容易使用它。左边的div显示了树，右边的div显示了单击时每个元素的内容:

<body>
    <div id="tree" style="position:absolute; width: 20%; height: 100%; overflow: scroll"></div>
    <div id="content" class="list-group-item node-tree" style="position: absolute; left: 20%; width: 80%; height: 100%">This is where content goes once you click on a file or folder element.</div>
</body>

There is a slight problem, though. The content of the div with the ID = tree gets cut off:

不过有一个小问题。与ID =树的div的内容被切断:

Ideally, I would like these list elements to overflow to the right, beyond the size of the div with the ID = tree, as you can tell, because I have set overflow: scroll, so I do not want any text to wrap to a new line.

理想情况下，我希望这些列表元素可以溢出到右边，超出div的大小和ID = tree，因为我已经设置了溢出:滚动，所以我不希望任何文本包装到新行。

On runtime, it appends list elements as follows...

在运行时，它附加如下列表元素……

These list elements seem to have the following CSS:

这些列表元素似乎有以下CSS:

.list-group-item {
    position: relative;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid #ddd;
}

I have tried adding white-space: nowrap; to this CSS, which makes the text do what I want (and overflow with a scrollbar), but the background and border of each list element stay at the width of the parent (which is not what I want; I want them to also overflow all scrollable width just like I did with the text)!

我试过添加空格:nowrap;对于这个CSS，它使文本做我想做的(并带有一个滚动条)，但是每个列表元素的背景和边框都保持在父元素的宽度(这不是我想要的;我希望它们也能像我处理文本一样，溢出所有可滚动的宽度!

What can I do to make each element of this list properly overflow past the bounds of the parent div they all exist under?

要使列表中的每个元素正确地超出它们都存在的父div的界限，我可以做些什么呢?

Edit: I've tried putting overflow:visible on all parent levels as well, but it did not work. It removed the vertical scroll bar and kept all list item background borders still restricted to the width of the tree div. I also found that setting width = 10000px on the .list-group-item CSS partially gives me what I want as well, but obviously this makes the backgrounds too wide and the scroll bar becomes too elongated. I want the width of all list elements to be equal to the width of the widest overflowing content.

编辑:我尝试过设置溢出:在所有父级别上都可以看到，但是它不起作用。它消除了垂直滚动条和保持所有列表项背景边界仍然局限于树的宽度div。我还发现,设置宽度= 10000 px .list-group-item CSS部分给了我我想要的,但显然这使背景太宽,滚动条变得太长。我希望所有列表元素的宽度等于最宽溢出内容的宽度。

2 个解决方案

#1

I figured it out. I had to change the display to table-row-group and I had to add white-space: nowrap:

我想出来。我不得不把显示器改成表格行组，我还得加上空格:nowrap:

.list-group-item {
    position: relative;
    display: table-row-group;
    padding: 10px 15px;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid #ddd;
    white-space: nowrap;
}

#2

Add overflow:visible to the parent element(s). You may need this at multiple levels, as each parent element could potentially restrict the content.

添加溢出:对父元素可见。您可能需要在多个级别上使用它，因为每个父元素都可能限制内容。

#1