див:
.parent {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
В нем три дочерних:
.child {
width: 200px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
border: 1px solid black;
}
Как видим, высота нигде не задана - ни родительскому диву, ни дочернему, определяется по контенту. И вот засада: когда в одном из дивов контент переносится на другую строку, другие дивы не принимают его высоту, а остаются со своей, в результате чего бордеры получаются уродские. height: 100% не помогает.
Как быть?
Возможно из за ширины
а что с шириной не так? На что она влияет? Даже если я не задам ширину, все равно когда-то будет случай, когда контент не будет помещаться в какой-то див.
У вас же задано align-items: center. Вот высота и минимальная. Уберите, чтобы сработало дефолтное значение stretch
о, вот так сработало!
Обсуждают сегодня