Почему эта фиолетовая коробка выходит за пределы ширины левой панели ?? А что именно это? ⇐ Html

[Anonymous]

Почему эта фиолетовая коробка выходит за пределы ширины левой панели ?? И что такое именно это?

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

.menuItem {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
margin: 0;
padding: 0 !important;
max-width: 100% !important;
font-size: 2rem;
border-bottom: $menu-item-border;
white-space: normal;
text-overflow: unset;

.body {
//background: #f7faff;
padding: 1rem;
border-radius: 4px;
max-width: 100%;
.formItem {
padding: 0.5rem 0;
font-size: 1.75rem;
color: #333;
}
}

.header {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 2rem;
padding: 1rem 2rem;
max-width: 100%;
//border-bottom: $menu-item-border;

.title {
flex-grow: 1;
font-weight: bold;
font-size: 2rem;
white-space: nowrap;
//overflow: hidden;
text-overflow: ellipsis;
text-align: center;
padding: 0 !important;
overflow-wrap: break-word !important;
}

.threeDots {
align-items: self-end;
}
}

Также я хочу переместить 3 точку в правый угол панели


Подробнее здесь: https://stackoverflow.com/questions/795 ... exactly-is