html - 使用 CSS 网格，网格项溢出父容器

Question

我目前正在处理网格元素溢出父容器的问题。我不确定如何纠正这个问题。如果我调整视口(viewport)的大小，表单字段会溢出父容器，这并不理想。如果有人可以提供一些帮助，那就太好了。非常感谢!

Codepen 链接 - https://codepen.io/philmein23/pen/oybrVX

这是下面列出的 HTML 结构:

<div class="framed-layout-part modern container padded-container">
    <header>
        <h1>Create Contact Information</h1>
    </header>
    <section class="indent">
        <form class="person-edit-form-grid">
            <div>
                <div>
                    <label for="primary-email">Primary Email Address</label>
                    <input id="primary-email" type="text" value.bind="state.person.primaryEmail.address" readonly/>

                </div>
                <div>
                    <label for="secondary-email">Secondary Email Address</label>
                    <input id="secondary-email" type="text" value.bind="state.person.secondaryEmail.address"/>
                </div>
            </div>

            <div class="basic-info">
                <div class="basic-info-grid">
                    <label for="salutation">Salutation</label>
                    <select id="salutation" value.bind="state.person.prefix">
                        <option model.bind="null">Choose Salutation</option>
                        <option repeat.for="prefixValue of state.person.prefixValues" model.bind="prefixValue">
                            ${prefixValue.value}
                        </option>
                    </select>
                </div>

                <div class="basic-info-grid">
                    <label for="first-name">First Name</label>
                    <input id="" type="text" value.bind="state.person.firstName"/>
                </div>
                <div class="basic-info-grid">
                    <label for="middle-initial">Middle Name</label>
                    <input id="middle-initial" type="text" value.bind="state.person.middleName"/>
                </div>
                <div class="basic-info-grid">
                    <label for="last-name">Last Name</label>
                    <input id="last-name" type="text" value.bind="state.person.lastName"/>
                </div>
                <div class="basic-info-grid">
                    <label for="title">Title</label>
                    <input id="title" type="text" value.bind="state.person.title"/>
                </div>
            </div>

            <div class="phone-info">
                <h2>Phone</h2>
                <div class="phone-info-grid">
                    <label id="work-phone">Work</label>
                    <div>
                        <span>+</span>
                        <input class="country-code-width" type="text" value.bind="state.person.businessPhone.countryCode" /> 
                    </div>
                    <div>
                        <input aria-labelledby="work-phone" placeholder="Phone Number" type="text" value.bind="state.person.businessPhone.number"/>
                    </div>
                    <div>
                        <input style="width: 80px" placeholder="Extension" aria-labelledby="work-phone" type="text" value.bind="state.person.businessPhone.extension"/>
                    </div>
                </div>
                <div class="phone-info-grid">
                    <label id="mobile-phone">Mobile</label>
                    <div>
                        <span>+</span>
                        <input class="country-code-width" type="text" value.bind="state.person.mobilePhone.countryCode" /> 
                    </div>
                    <div>
                        <input id="" type="text" placeholder="Phone Number" value.bind="state.person.mobilePhone.number"/>
                    </div>
                </div>
                <div class="phone-info-grid">
                    <label id="fax-number">Fax</label>
                    <div>
                        <span>+</span>
                        <input class="country-code-width" type="text" value.bind="state.person.faxPhone.countryCode" />
                    </div>
                    <div>
                        <input aria-labelledby="fax-number" type="text" placeholder="Phone Number" value.bind="state.person.faxPhone.number"/>
                    </div>
                </div>
            </div>
        </form>
    </section>
</div>  

这是下面列出的 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;
        }
    }

Answer 1

您可以使用媒体查询来减少较小视口(viewport)中的列数和列宽。例如:

@media screen and (max-width: 1350px){
  .phone-info-grid {
    grid-template-columns: 50px repeat(2, max-content);
  }
}

@media screen and (max-width: 900px){
  .phone-info-grid {
    grid-template-columns: 50px repeat(1, max-content);
  }
}