контейнер начальной загрузки - содержит div с шириной более 100% из-за абсолютного позиционирования

Question

Я помещаю div со 100% внутри контейнера начальной загрузки.Некоторые из div имеют дополнительные элементы, которые позиционируются с абсолютным позиционированием, чтобы выходить за пределы контейнера:

.inst-link {
    color:#414447db;
    background-color: transparent;
    font-size: 3rem;
    margin-bottom: 1rem;
    border: 1px solid #ECEFEF;
    box-shadow: 0 1px 3px #d1d1d1;
    transition: box-shadow 100ms ease-in-out;
    width: 100%;
    padding: 15px 20px;
    outline: none;
    display: flex;
    align-items: center;
    vertical-align: middle;
    justify-content: flex-end;
    position: relative;
}
.inst-link::before {
    font-family:"Font Awesome 5 Free";
      content: '\f359';
      color: #2ecc71;
      position: absolute;
      right: 0;
      margin-right: -50px;
}

Соответствующий HTML по этому вопросу:

<div class"container">
    <div class="inst-link"></div>
</div>

Как вы можете видетьУ div inst-link есть вспомогательные элементы с абсолютным позиционированием, которые контейнер div не может принять во внимание.

В результате на большинстве экранов он выглядит хорошо, но перед каждой точкой разрыва элементы с абсолютным позиционированием выходят за пределы экрана.,Другими словами, прямо перед точкой разрыва, когда элементы div становятся меньше, элементы с абсолютным позиционированием выходят за пределы экрана.Я предполагаю, что вариант будет изменить точки разрыва?

Что может быть хорошим способом исправить проблему?

Спасибо

Answer 1

Контейнер представляет наибольшую ширину для вашего контента.Если у вас был контент вне оболочки на устройстве малой ширины (планшет или мобильное устройство).Содержимое переполняет область просмотра.Вы можете скрыть это с помощью медиа-запроса

@media (min-width: 960px) {
    .inst-link::before {
        font-family:"Font Awesome 5 Free";
        content: '\f359';
        color: #2ecc71;
        position: absolute;
        right: 0;
        margin-right: -50px;
    }
}