Flex-Box Or Grid: How to align columns across multiple rows?

Question

I created an example with react:

Code Sandbox

As you can see here:

The columns are not aligned because of the dynamic width of each column. What do I need to do if I want all the columns to stay aligned across all rows even when they need to shrink closer together because of the window size?

EDIT

Same problem with css-grid:

Code Sandbox 2

Answer 1

I modify your INDEX.TSX

class OrderRow extends React.Component<OrderRowProps> {
    public render() {
        const { index, order } = this.props;

        return (
            <div className="OrderRow">
                <div className="OrderRowIndex">{index}</div>
                <div className="columnGroup">
                    <OrderColumn values={order.number} />
                    <OrderColumn values={order.size} />
                    <OrderColumn values={order.amount} />
                    <OrderColumn values={order.price} />
                    <OrderColumn values={order.page} />
                </div>
            </div>
        );
    }
}

Also I Change many CSS.

*,
*:after,
*:before{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body{
    margin: 0;
    padding: 15px;
}
.Chunk {
    flex-basis: 30px;
    flex-grow: 0;
    flex-shrink: 0;
    max-width: 30px;
    height: 30px;
    border: 1px solid black;
    text-align: center;
    vertical-align: middle;
    line-height: 30px;
}

.OrderColumn {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    min-width: 300px;
    max-width: 500px;
}

.columnGroup{
    flex-basis: calc(100% - 30px);
    flex-grow: 0;
    flex-shrink: 0;
    max-width: calc(100% - 30px);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.OrderColumn:first-child{
    justify-content: flex-start;
}

.OrderRow {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}

.OrderRow > div {
    /* flex: 1 1 0px; */
    padding-left: 5px;
    padding-right: 5px;
}

.OrderRowIndex {
    flex-basis: 30px;
    flex-grow: 0;
    flex-shrink: 0;
    max-width: 30px;
    height: 30px;
    /* margin-left: 5px;
    margin-right: 5px; */
    border: 1px solid black;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    line-height: 30px;
}

.Order {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    width: 100%;
    overflow-x: auto;
}

Here is your CodeSanBox . Now it's look like this.

Answer 2

The following is a solution I can live with:

Code Pen

Im using a grid with gridTemplateColumns being a minmax of minum pixel size and fr notation. Im still annoyed by the minimum pixel width because it is not dynamic. I would prefer if the minium width is always fitting to its content. So if there are 2 cells in a column it should be minimum of 60, if there are 3 it should be 90, and so on. So 30 px per cell.