Flexbox со столбцом не обеспечивает желаемый результат в CSS ⇐ CSS

[Anonymous]

У меня есть макет HTML, оформленный с помощью flexbox, но текущий CSS не обеспечивает желаемый макет. Я хочу, чтобы вторая строка второго столбца начиналась сразу после второй строки первого столбца.


Вот код:

Код: Выделить всё

.container {
display: flex;
flex-direction: row;
}

.programs {
background: blue;
}

.programs-2 {
background: green;
}

.xyz {
margin-bottom: 10px;
display: flex;
flex-grow: 0; /* Prevents growth */
}

.xyz ul {
display: flex;
flex-direction:row;
list-style: none;
padding: 0;
margin: 0;
}

.xyz ul .box {
width: 100px;
background: red;
border-right: 1px solid #fff;
}

.xyz ul .box:last-child {
width: 200px;
}

.programs .xyz:first-child ul .box:last-child {
width: 300px; /* This affects only the first column */
}

/* Remove horizontal spacing on programs-2 */
.programs-2 .xyz {
margin-left: 0; /* Ensure no margin on left side */
}

Код: Выделить всё

[list]
[*]
ABC

[*]
ABC

[*]
ABC

[/list]

[list]
[*]
ABC 2

[*]
ABC

[*]
ABC

[/list]




[list]
[*]
ABC

[*]
ABC

[*]
ABC

[/list]

[list]
[*]
ABC 2

[*]
ABC

[*]
ABC

[/list]

Примечание: – Я не хочу изменить HTML, поскольку структура HTML зависит от определенных функций, которые я не могу изменить.
Мне нужен этот результат без изменения HTML



Подробнее здесь: https://stackoverflow.com/questions/787 ... put-in-css