Html DIV元素脱离父元素

我有一个分屏HTML页面。水平flex布局中有三个div，左右窗格用于内容。左窗格上的按钮栏设置为100%宽度，但它溢出了父元素。这可能是什么原因

这里是一个innerHTML的转储

正文{
填充：0px；
边际：0px；
背景色：rgb（200、210、80）；
字体系列：“Droid Sans”，无衬线；
}
科尔斯普利特先生{
高度：12px；
宽度：100%；
背景色：白色；
背景图像：url（“http://www.vitacoll.co.uk/assets/images/splitterv.png");
背景重复：无重复；
背景位置：中心；
光标：ns调整大小；
}
.罗斯普利特{
身高：100%；
宽度：12px；
背景色：白色；
背景图像：url（“http://www.vitacoll.co.uk/assets/images/splitterh.png");
背景重复：无重复；
背景位置：中心；
光标：ew调整大小；
}
.顶{
溢出：自动；
}
特雷尔先生{
列表样式：无；
用户选择：无；
-moz用户选择：无；
}
特雷利先生{
保证金：3倍；
列表样式类型：无；
}
.treeli span：第一种类型{
用户选择：无；
字体大小：粗体；
光标：指针；
}
.folderselected{
背景颜色：蓝色；
颜色：白色；
}
.当选{
保证金：3倍；
背景颜色：蓝色；
颜色：绿色；
}
.装货{
z指数：100；
位置：固定；
身高：100%；
宽度：100%；
背景色：rgba（255、255、255、1）；
光标：等待；
}
.空白{
不透明度：0；
z指数：-10；
位置：固定；
显示器：flex；
身高：100%；
宽度：100%；
背景色：rgba（255、255、255、0.6）；
证明内容：中心；
对齐项目：居中；
}
.广场{
填充：15px；
背景色：rgb（232、123、4）；
边框：1px实心；
}
.广场p{
显示器：flex；
}
.方形标签{
弹性基准：30%；
文本对齐：右对齐；
填充物：5px；
}
.塔布被选中{
-moz用户选择：无；
背景色：#b3c3dd；
颜色：白色；
弹性基础：自动；
填充物：5px；
边界半径：8px 8px 0px 0px；
}
B.正常{
-moz用户选择：无；
背景色：#37588e；
颜色：白色；
弹性基础：自动；
填充物：5px；
边界半径：8px 8px 0px 0px；
}
#类别_props{}
#类别(u)项目{
显示：无；
}
#右窗格{
显示器：flex；
弯曲方向：立柱；
}
#内容{
背景色：#b3c3dd；
}
#标签{
显示器：flex；
弯曲方向：行；
宽度：100%；
保证金：7px 7px 0px 7px；
}
#树板{
宽度：100%；
显示器：flex；
弯曲方向：立柱；
}
#树形按钮杆{
边框：3倍实心；
填充：10px；
宽度：100%；
显示器：flex；
弯曲方向：行；
证明内容：中心；
}
#树按钮栏按钮{
显示：块；
柔性底座：自动；
}
#树控制器{
宽度：100%；
柔性底座：自动；
溢出：自动；
}
#拆分1{
填充：0px；
边界：0px；
位置：绝对位置；
宽度：100%；
身高：100%；
}

添加删除
刷新


[+]根

维生素



类别属性
品类产品
分类标题：

简称：

创造

取消

分类标题：

简称：

创造

取消

您的按钮因其填充而被推倒

2个选项：

拆下衬垫

---

添加

框大小：边框框到您的按钮容器

---

尝试将#threebuttonbar的宽度值更改为自动：

#treemenubuttonbar {
 border: 3px solid;
 padding: 10px;
 width: auto;
 display: flex;
 flex-direction: row;
 justify-content: center;
}

---

框大小：边框框

是您想要的，但我认为它需要添加到

#TreeeNubuttonBar

（按钮包装）中，而不是按钮本身。没错，这是我的第一个答案，我应该将其格式化得更好。正确的做法和学习方法？@zgood是正确的-只需在包装器中添加

框大小：边框框

@约翰纳森·哈代——你做得很好。继续。是的，我测试过，一个较短的修复。