Html Datatable将Flex容器拉伸到页面边界之外 我有一个DATATATE包含在我的页面中间的Flex容器中。我希望这个容器只能延伸到包装器的边界和navheader的底部。当datatable的内容拉伸时，它也会将flex容器拉伸到这些元素之外

我已经尝试将

minwidth:0

和/或

overflow:hidden

添加到adminContainer和datatable（及其包装器）中，但是这些都没有任何区别

JSP:

我不想在datatable上启用x&y滚动，也不想使用水平滚动条，但是当datatable增长时使用y滚动条是可以的

<div class="wrapper">
        <div class="adminContainer">
            <h3>Admin Panel</h3>
            <div class="adminMenuBar">
                <ul>
                    <li class="adminLink" data-value="user">Users</li>
                    <li class="adminLink" data-value="group">Groups</li>
                    <li class="adminLink" data-value="framework">Frameworks</li>
                    <li class="adminLink" data-value="focus">Foci</li>
                </ul>
            </div>
            <div class="adminContent">
                <table class="adminTable">
                    <c:if test="${users != null}">
                        <thead>
                        <tr>
<%--                            <th></th>--%>
                            <th>Username</th>
                            <th>Email Address</th>
                            <th>Roles</th>
                            <th>Groups</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${users}" var="user">
                            <tr>
<%--                                <td></td>--%>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </c:if>
                </table>
                <input id="tableType" type="hidden" value="user">
            </div>
        </div>
    </div>

.wrapper{
    height: 100%;
    width: 100%;
    margin: 0 20px 0 20px;
}

.adminContainer{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    box-shadow: 0 1px 3px 1px #BEBEBE;
    padding-bottom: 40px;
    padding-left: 15px;
    padding-right: 15px;
}