Css RichFaces选取列表：流体可滚动列表/列

目标

我想要这个：

初始情况

在以下示例代码中，使用了

rich:picklist

：

<rich:pickList id="userAuthoritiesPickList" value="#{securityBean.selectedUserAuthorities}"
  sourceCaption="sourceCaption" targetCaption="targetCaption" style="background:green" orderable="false"
  addText="addText" addAllText="addAllText" removeText="removeText" removeAllText="removeAllText">
    <f:selectItems value="#{securityBean.authorities}" var="authority" itemValue="#{authority}"
     itemLabel="#{securityBean.getLocalizedRoleName(authority.authority)}" />
</rich:pickList>

我得到以下结果：

观察结果：

sourceList有一个滚动条，因为它的元素太大

右边有足够的空间

目标

我希望pickList使用右边的可用空间，这样sourceList中的滚动条就会变小，或者根本不需要滚动条。例如，选择列表应使用70%的空间

调整浏览器窗口的大小时，选取列表（和sourceList）的宽度应调整，以便sourceList中的滚动条再次成为必要

我尝试的

使用这些资源：

• 查看chrome开发工具的页面宽度
• 组件参考
• java文档

注意到：

• rich:pickList

  宽度的唯一标记属性是listWidth，它只允许您定义列表元素的像素宽度（百分比不可能）
• 如果未定义listWidth，则listWidth为

  宽度：200px

  。使用
  .rf拾取lst scrl{ 宽度：首字母！重要； }
  我能把它改成这个。 sourceList现在变大了，但当我调整浏览器窗口的大小时，sourceList的宽度不会调整大小。相反，整个页面出现了一个滚动条

• 我试图在严重的样式类中将宽度设置为百分比。比如
  .rf pick src{ 宽度：50% }
  但这只占源列表的一半，而不是拾取列表，因此按钮的空间只会扩大

摘要：那么如何获取行为：SourceList（pickList）应该使用freeSpace。如果不够->调整源列表的大小？（就像在表格中一样，您可以使用

表格布局：fixed；

）执行某些操作。由于使用chrome devTools

表格布局手动更改页面，我得到了我想要的。但是
表
是由
rich:pickList
生成的，我不能为它们设置css属性（没有id，类..）：

我希望它像这篇文章开头的Aim图片一样。
使用CSS不需要id或类，特别是如果你知道布局是静态的：

.rf-pick > table,
.rf-pick > table > tbody > tr > td:nth-child(3) > table {
    width: 100%;
    table-layout: fixed;
}

.rf-pick > table > tbody > tr > td:nth-child(2) {
    width: 30px; /* buttons */
}

将listWidth设置为“自动”（“100%”也可以，我必须修改描述）
Thx，这对我帮助很大。