Как предотвратить переполнение с помощью flex в псевдоэлемент
У меня есть список, в котором я использую 5 div с flex-basis для размещения содержимого в каждой строке li. У каждого из этих div есть атрибут data-label с заголовком для альтернативного просмотра для мобильных устройств. Итак, у меня есть медиа-запрос, который выглядит так:
.col {
content: attr(data-label);
flex-basis: 107px;
text-align: left;
padding-right: 10px;
}
С приведенной выше настройкой я получаю следующий результат, терминологию которого я действительно не знаю. На снимке экрана я вижу, что нижние 3 столбца правильно перешли и аккуратно выровнены. А вот верхний почему-то ¿переполняется? в районе :before
Кто-нибудь знает правильную терминологию этого поведения или есть какие-либо советы о том, как предотвратить это, чтобы все они аккуратно выровнялись? Я пробовал МНОЖЕСТВО вещей, возиться с элементной проверкой, чтобы увидеть, что имеет эффект, а что нет, но я просто не могу понять это.
Вам необходимо предоставить правильный минимально воспроизводимый пример вашей проблемы.
Jep, извините, давно с тех пор, как я использовал stackoverflow, есть JSfiddle, который воспроизводит проблему.
Вы можете создать фрагменты стека, что предпочтительнее, чем JSFiddle, потому что он сохраняет весь код на этой странице и позволяет избежать риска наличия неработающей ссылки в вопросе.
Ответы 1
У детей Flex есть flex-shrink: 1, установленный браузером. Если вы хотите, чтобы дочерний элемент flex не становился меньше, чем набор flex-basis, обязательно отключите свойство сжатия для 0.
.cart-col::before {
flex-shrink: 0;
content: attr(data-label);
flex-basis: 107px;
text-align: left;
padding-right: 10px;
}
Ааа окей, я не знал, что спасибо за теги и объяснение, я буду продолжать читать об этом. Это также решает мою проблему за один раз.
Не могли бы вы добавить свой HTML-код, чтобы мы могли воссоздать эту проблему?