Javascript 如何从底部对齐钢筋

我正在使用react开发一个条形图。

我面临的问题是，当给定一定的高度时，钢筋向下生长，而不是向上生长

这是条形码的css代码

.bar{
    width:20px;
    padding: 20px;
    background-color: orange;
    margin-left: 20px;
    margin-top: 105px;
    z-index: 500;
    border-radius: 10px;
    flex-shrink: 0;
}

这是条形图父级的css代码

.nextB{
    height: 350px;
    width: 740px;
    border: 0px solid black;
    z-index: 100;
    overflow: auto;
    margin-left: 265px;
    margin-right: 10px;
    margin-top: -376px;
    display: flex;
    flex-flow: row;
}

这是我的条形码组件的代码

import React from 'react';
import Classes from './barPart.css';
const barHandler= (props) =>(
    <div className={Classes.bar} style={{height: `${props.height}%`}}>
    </div>
);

export default barHandler;

请提供我必须在代码中进行的更正，以将我的条放置在灰线的下端，并让我知道是否需要更多信息。

您需要添加对齐项：柔性端；让它工作。看看这个例子

.nextB{ 高度：100px； 宽度：340px； 边框：0px纯黑； z指数：100； 溢出：自动； 显示器：flex； 柔性流：行； 对齐项目：柔性端； } .酒吧{ 宽度：20px； 填充：20px； 背景颜色：橙色； 左边距：20px； z指数：500； 边界半径：10px； 弹性收缩：0； }