Элементы сетки переполняются из родительского контейнера с помощью CSS Grid ⇐ Html

[Anonymous]

В настоящее время я решаю проблему, связанную с переполнением элементов сетки родительского контейнера. Я не уверен, как исправить эту проблему. Если я изменю размер области просмотра, поля формы переполнят родительский контейнер, что не идеально. Если кто-то может оказать некоторую помощь, это было бы здорово. Большое спасибо!

Ссылка на codepen — https://codepen.io/philmein23/pen/oybrVX

Вот структура HTML, указанная ниже:



Create Contact Information





Primary Email Address


Secondary Email Address





Salutation

Choose Salutation

${prefixValue.value}



First Name


Middle Name


Last Name


Title




Phone

Work

+








Mobile

+






Fax

+











Вот код CSS, указанный ниже:

body {
background: lightgrey;
}

h1, h2 {
margin-bottom: 5px;
}

.framed-layout-part {
border: none;
-webkit-box-shadow: 2px 2px 3px 0 #ccc;
-moz-box-shadow: 2px 2px 3px 0 #ccc;
box-shadow: 2px 2px 3px 0 #ccc;
position: relative;
border-radius: 3px;
border: none;
box-sizing: border-box;
background-color: #fff;
margin: 7px;
}

.indent {
margin-left: 15px;
}

.country-code-width {
width: 20px !important;
}

.container {
width: 30vw;
margin: 30px auto;
}

.button-container {
margin-top: 10px;
display: flex;
justify-content: flex-end;
}

#primary-email {
border: none;
background: lightgray;
}

@supports not (display: grid) {
.person-edit-form-grid {
display: flex;
flex-direction: column;
}

.basic-info {
margin: 15px 0;
}

.phone-info {
width: 30vw;
}

.phone-info-grid {
display: flex;
}

label {
flex-basis: 80px;
}

.phone-info-grid > div {
margin: 0 5px 5px 0;
}
}

@supports (display: grid) {
.person-edit-form-grid {
display: grid;
grid-row-gap: 20px;
padding: 10px 0;
}

.basic-info {
display: grid;
grid-row-gap: 10px;
}

.basic-info-grid {
display: grid;
grid-template-columns: 100px max-content;
}

.phone-info {
display: grid;
grid-gap: 10px;
}

.phone-info-grid {
display: grid;
grid-template-columns: 100px repeat(3, max-content);
grid-column-gap: 10px;
}
}


Подробнее здесь: https://stackoverflow.com/questions/506 ... g-css-grid