Question

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

指向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

You could use media queries to reduce the number of columns and the column width in smaller viewports. For example:

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

Answer 2

The main reason for behaviour is 'display: grid' on .person-edit-form-grid,.phone-info-grid classes

U can see the change by just removing display grid on that class.

Go with bootstrap for proper implementation using row,cl

https://getbootstrap.com/docs/4.1/layout/overview/

Answer 3

You can set min-width:

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

网格项使用CSS网格从父容器溢出

3 个答案: