Html 如何使这些div在滚动div中扩展到全宽？

我试图在html/css中创建一个文件层次结构，但我无法获取这些标签或它们所在的div以扩展到全宽。它们只会扩展到可见区域的宽度，但我想要它们所在区域的宽度。下面是一个例子，看看我在说什么。灰色区域需要全部在右侧对齐

a=3
html，
身体{
身高：100%；
宽度：100%；
填充：0；
保证金：0；
}
分区层次结构{
位置：相对位置；
溢出：自动；
右边框：1px纯色灰色；
宽度：150px；
左：0；
排名：0；
底部：0；
身高：100%；
}
div.hierarchy标签{
显示：块；
最小宽度：100%；
背景：#eee；
空白：nowrap；
}
目录{
左侧填充：20px；
宽度：100%；
}
目录标签{
边框：1px纯灰；
宽度：100%；
光标：指针；
}

等级制度
src
test.txt
自述文件
一个很长的filename.txt文件
只需添加
显示：内联块至
div.directory


html，
身体{
身高：100%；
宽度：100%；
填充：0；
保证金：0；
}
分区层次结构{
位置：相对位置；
溢出：自动；
右边框：1px纯色灰色；
宽度：150px；
左：0；
排名：0；
底部：0；
身高：100%；
}
div.hierarchy标签{
显示：块；
最小宽度：100%；
背景：#eee；
空白：nowrap；
}
目录{
左侧填充：20px；
/*宽度：100%*/
/*增加*/
显示：内联块；
}
目录标签{
边框：1px纯灰；
宽度：100%；
光标：指针；
}

等级制度
src
test.txt
自述文件
一个很长的filename.txt文件
您需要更改
div.directory
CSS类，如下所示：

div.directory {
  display:inline-block;
  padding-left: 20px;
}

我做了以下修改：

1）添加了
显示：内联块

2）删除
宽度：100%规则

以下是一个例子：

（作为旁注，在CSS中，将
宽度
和
填充
或
边距
规则应用于同一元素通常是不好的做法。这是因为一些浏览器将
宽度
解释为包含
填充
边距
规则，而有些浏览器则不这样做，从而导致结果不一致）
像这样的兄弟：[链接]？谢谢你的回答。我以为内联块是让东西像字母一样，你可以定义它们的宽度和高度，但它们仍然像文本一样内联流动。但看起来更像是块在这样做，内联块使它们像块没有卷轴一样一路扩展……无论如何，谢谢：）没问题，因为您使用的是固定宽度的容器（带有滚动条），所以问题稍微复杂一些，因为您的块扩展了可用宽度的100%…即150px。但是，您希望宽度扩展到100%以上。使用
display:inline block
占用整个剩余空间，而不仅仅是父
div
上指定的
150px
。感谢您的回答，我选择了下面的一个，因为他添加了小提琴和所有东西。