Rasterelemente laufen bei Verwendung von CSS Grid aus dem übergeordneten Container über ⇐ HTML

[Anonymous]

Ich beschäftige mich derzeit mit einem Problem, bei dem Rasterelemente den übergeordneten Container überlaufen. Ich bin mir nicht sicher, wie ich dieses Problem beheben kann. Wenn ich die Größe des Ansichtsfensters ändere, überlaufen die Formularfelder den übergeordneten Container, was nicht ideal ist. Wenn jemand Hilfe leisten kann, wäre das großartig. Vielen Dank!

Link zu Codepen – https://codepen.io/philmein23/pen/oybrVX

Hier ist die unten aufgeführte HTML-Struktur:

Code: Select all

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

+

Hier ist der unten aufgeführte CSS-Code:

Code: Select all

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;
}
}