Html div中有文本时会折叠

我有一个折叠div的问题。 当我添加一些文本时，它会从父div折叠。 下面是HTML代码

.container{
宽度：80%；
身高：50%；
背景色：#eee；
填充：30px
}
html，正文{
身高：100%；
}
.图表{
背景：红色；
宽度：30px；
右边距：10px；
显示：内联块；
}

测试

使用

垂直对齐：底部

.chart {
    background: red;
    width: 20px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: bottom;
}

您可能意识到，在您的示例中，柱的位置取决于最高的柱，
对你来说，这是最后一个

如果我必须在这种情况下绘制一些列，我会选择flex：


.container{
宽度：80%；
身高：50%；
背景色：#eee；
填充：30px；
显示器：flex；
对齐项目：柔性端；
}
html，正文{
身高：100%；
}
.图表{
背景：红色；
柔性：0 30像素；
右边距：10px；
显示：内联块；
}

测试
最佳解决方案是使用@FelixAJ所说的
垂直对齐。问题主要是由于溢出导致内部文本。使用
vertical align
可以覆盖此默认行为。另外，我建议您使用
minwidth
代替
width
以避免溢出。使用这种方法，条形图的宽度将根据内部文本的不同而增加。
您希望文本位于条形图的顶部还是底部？如果在顶部，可以使用垂直对齐：底部。您希望文本显示在哪里？你甚至想显示文本吗？