Проблема с отступами css

135
08 марта 2022, 14:20

В одном браузере вид чата вот такой: картинка #1. Хотя должен быть как на картинке #2. Из-за чего такое выходит понять не могу. Кто-нибудь знает как решить это БЕЗ обозначения max-height (max-block-size) да и вообще без высоты, ведь высота блоком с тестом должна контролироваться её контентом.

На других фото есть дополнительная информация о блоках.

Код этого блока с сообщениями:

.messages-container {
                            @include scrollbar(vw(5px), rgba(white, 0.05), #424549);
                            padding: vw(20px);
                            overflow: auto;
                            .message-block {
                                margin-top: vw(20px);
                                border-bottom: 1px solid rgba(white, 0.1);
                                &:first-child {
                                    margin-top: 0;
                                }
                                &__picture {
                                    inline-size: vw(47px);
                                    block-size: vw(47px);
                                    border-radius: 50%;
                                    background: {
                                        color: #1E2124;
                                        position: center;
                                        size: cover;
                                        repeat: no-repeat;
                                    }
                                }
                                .message-content {
                                    margin-left: vw(15px);
                                    &__text {
                                        &-nickname {
                                            @include font(ProximaNova, normal, normal, vw(17px));
                                            color: white;
                                        }
                                        &-date {
                                            @include font(ProximaNova, 100, normal, vw(13px));
                                            color: rgba(white, 0.5);
                                            margin-left: vw(10px);
                                        }
                                        &-message {
                                            @include font(ProximaNova, normal, normal, vw(17px));
                                            color: white;
                                            margin-top: vw(5px);
                                            margin-bottom: vw(20px);
                                            line-height: normal;
                                        }
                                    }
                                }
                            }
                        }

Answer 1

Решил проблему, вложив расширяемый блок в простой <div></div>

READ ALSO
задание параметров в метод

задание параметров в метод

существует метод со своими условиями

159
Отправить POST из js в php

Отправить POST из js в php

Не понимаю в чём проблемаЗадача такая: Нужно отправить из js данные в php и вывести их

87
вызывать определенный массив из метода

вызывать определенный массив из метода

Есть функция валидации полей, для каждого поля свое правило в массивах, как эти массивы определить к примеру в метод rules и с него потом доставать...

108
Добавить в Viber-bot кнопки ответа

Добавить в Viber-bot кнопки ответа

Использую Viber-bot и phpКаким образом добавить кнопки ответа под постом каждого из сообщений отправленным ботом? Аналогично Telegram

125