Css 调整拾取列表和面板大小时出错。面板与拾取列表的位置重叠

我在一行中有一个拾取列表和一个面板，但当我调整窗口大小时，面板与拾取列表重叠。请参阅下面的代码和屏幕（）。只有当面板到达拾取列表的箭头时，才会无误地调整大小

                                        <div class="ui-g ui-fluid">
                                            <div class="ui-g-12 ui-md-2">
                                                <p:outputLabel
                                                                value="#{pageMsgs['citiesMSG.aaaa']}"
                                                                style="font-weight: bold" />
                                            </div>
                                            <div class="ui-md-4 ui-g-12">
                                                <h:panelGroup>
                                                    <p:pickList id="pick1"
                                                        value="#{citiesBean.rowLevelCities}"
                                                        converter="#{pickListConverter}" var="cities"
                                                        responisve="true"
                                                        itemLabel="#{cities.name}" itemValue="#{cities}"
                                                        disabled="#{!citiesController.isEditMode(true)}">

                                                        <p:ajax event="transfer"
                                                            listener="#{citiesController.onTransferCityHeader}"
                                                            update="pick1 panelH" />

                                                    </p:pickList>
                                                </h:panelGroup>
                                            </div>
                                            <div class="ui-md-6 ui-g-12">
                                                <p:panel header="Header"
                                                    id="panelH">
                                                    <div class="ui-g ui-fluid">
                                                        <div class="ui-md-3 ui-g-12">
                                                            <p:outputLabel
                                                                value="#{pageMsgs['citiesMSG.cityHeader']}"
                                                                style="font-weight: bold" />
                                                        </div>
                                                        <div class="ui-md-1 ui-g-12" />
                                                        <div class="ui-md-3 ui-g-12">
                                                            <p:outputLabel
                                                                value="#{pageMsgs['citiesMSG.cityHeader']}"
                                                                style="font-weight: bold" />
                                                        </div>
                                                    </div>
                                                </p:panel>
                                            </div>
                                        </div>

---

我使用的是JSF 2.2

您可以通过编辑您的问题来提供帮助，从而增加获得帮助的机会。您不需要调整面板和选取列表的大小，而是使用响应网格中的面板和选取列表来调整窗口的大小。。。所以，如果你用两个固定宽度的div代替面板和选择列表，你就没有问题了？如果我使用其他primefaces组件，那么我就没有问题了。我相信是挑选者造成了这个问题。