Html 在添加到表中后，防止内部div向左滑动

我有一个PHP页面，可以在div包装器包含的div元素中向表中添加和删除值。目标是使表构建在右侧，并保持固定在最左侧的位置（下面的代码）。我使用的代码最初将所有内容居中，但表会随着值的添加或删除而移动。请参阅下面的图片，以更清楚地了解我所说的内容

滚动前：我的问题：如何在内部div向右增长的同时保持其左边缘不变

在包装器div中居中的div，看起来不错

输入新用户后，它向左移动，而我希望div向右增长。正如您所看到的，左侧div的边缘不再位于演示的N下方，而是位于to中的t处。我不明白为什么会这样。见下面的CSS。

本例中的CSS：

.wrapper {
    position: fixed;
    top: 100;
    left: 0;
    height: 50%;
    width: 100%;

    /* this is what centers your element in the fixed wrapper*/
    display: flex;
    flex-flow: column nowrap;
    justify-content: center; /* aligns on vertical for column */
    align-items: center; /* aligns on horizontal for column */

    /* just for styling to see the limits */
    border: 2px dashed red;
    box-sizing: border-box;
}

.element {
    position: absolute;
    border: 2px dashed purple;
    padding: 10px;
    box-sizing: border-box;
}

创建这些表（从ini文件读取并动态生成每个部分的表）：

我认为出现这种情况的原因是紫色的
。元素
容器使用
flex
定位，并且没有设置
高度
或
宽度
。因此，它随着内容的增长而增长

您可以通过多种方式解决此问题，具体取决于您的需求

在
元素上设置
宽度
或
最大宽度

将.container设置为左对齐，并给出
。container
一些
左边距
以给出左位置
将
左
位置添加到
.container
中，使其仅向右增长
您可以尝试启用滚动
overflow-x:auto
或在多行上中断单词
word break:break all这取决于你的布局和你想要的最终结果。元素是绝对的；尝试添加
left:200px
，看看这是否会使它粘住。你想让它绝对定位吗？您可以将边距添加到父容器中，然后使flex项目对齐
left
@willoller元素标记中的left:200px似乎使其粘滞。我确实希望它也绝对定位
<div class="wrapper">
<div class="element">
    <?php 
        $file = "pages/test.ini";
        $data = parse_ini_file($file, true);

        foreach ($data as $section => $section_content) {
    ?>
            <table style='padding:5px; background-color: white; border: 1px solid black;'>
                <h3><?=$section?>   <i class='glyphicon glyphicon-plus' id='<?=$section?>' onclick="add(id, 'addUser')" style='padding: 2px;'></i><i class='glyphicon glyphicon-remove' id='<?=$section?>' onclick="remove(id, 'removeUser')" style='padding: 2px;'></i></h3>
                    <td style='padding:2px; border: 1px solid black;'><strong>Users</strong></td>
                    <td style='padding:2px; border: 1px solid black;'><?=$section_content['users'];?></td>
                </tr>
                <tr>
                    <td style='padding:2px; border: 1px solid black;'><strong>Groups</strong></td>
                    <td style='padding:2px; border: 1px solid black;'><?=$section_content['groups'];?></td>
                </tr>
            </table>    

        <?php } ?>
</div>
</div>