Angular Material - mat-select: пользовательский отступ переполняет родительский элемент

Question

Я использую компоненты углового материала и пытаюсь настроить комбинированное окно (выбрать). Когда я изменяю отступ компонента, он переполняет элемент div-оболочки. Я ожидал, что он будет расти вместе.

Внешний вид до добавление отступов

Внешний вид после добавление отступов

Как мы видим, div mat-select не вырос, так как элемент mat-select увеличил свою ширину, добавив padding

HTML-код

<div style="border: 1px solid black; min-width: 100px; margin: 0px 5px; float: left">
    <mat-form-field class="my-select template-select">
        <mat-select [(value)]="templateSelected">
            <mat-select-trigger>
                <div fxLayoutAlign="start center">
                    <i fxFlex="none" class="material-icons md-dark">visibility</i>
                    <span fxFlex>{{templateSelected}}</span>
                </div>
            </mat-select-trigger>
            <mat-option value="Full data">
                <div fxLayoutAlign="start center" class="template-option">
                    <i fxFlex="none" class="material-icons md-dark">done</i>
                    <span fxFlex>Full data</span>
                </div>
            </mat-option>
            <mat-option value="My quarterly report">
                <div fxLayoutAlign="start center" class="templateOption">
                    <i fxFlex="24px" class="material-icons md-dark"></i>
                    <span fxFlex>My quarterly report</span>
                </div>
            </mat-option>
        </mat-select>
    </mat-form-field>
</div>
<div style="border: 1px solid black; min-width: 100px; margin-right: 5px; float: left">
    <button class="toolbar-button" mat-stroked-button>FILTER</button>
</div>

Я изменяю отступ элемента mat-select, как вы можете видеть ниже. (возможно, не место, чтобы изменить это)

Код CSS

.my-select mat-select {
    background-color: rgba(58, 40, 8, 0.12);
    /*padding: 6px 0px 6px 0px;*/ /* NO Left and right padding*/
    padding: 6px 10px 6px 10px;   /* 10px left and right padding*/

    border-radius: 5px;
}

.my-select .mat-select-value {
    font-family: Roboto-Regular;
    font-size: 16px;
    color: rgba(58, 40, 8, 0.87);
}

.my-select .mat-form-field-underline {
    display: none;
}

.my-select mat-select-trigger div>i {
    margin-right: 8px;
}

Кто-нибудь понимает, почему это поведение? Как я могу это исправить?

Доступен живой код: https://stackblitz.com/edit/angular-mat-select-overflow

Большое спасибо за вашу помощь.

Привет

Answer 1

Я думаю, что здесь вам нужно использовать box-sizing: border-box; С CSS box-sizing Свойством. Свойство box-sizing позволяет нам включать отступы и границы в общую ширину и высоту элемента.

style.css

/* Add application styles & imports to this file! */
.my-select mat-select {
    background-color: rgba(58, 40, 8, 0.12);
    /*padding: 6px 0px 6px 0px;*/ /* NO Left and right padding*/
    padding: 6px 10px 6px 10px;   /* 10px left and right padding*/
    box-sizing: border-box;
    border-radius: 5px;
}

Разветвленный раствор на стеке