内容从正文中溢出

Question

我遇到的问题是 content overflow out of the page

我已经尝试将 with: 100% 添加到 body, main div 但内容仍然是 overflowing 我可以在 mobile 视图中看到该问题，我想同样的问题可能发生在 Desktop 视图中，目前它在桌面上工作正常。

我创建了一个页面，其中添加了一个 form，该表单从 body 溢出。

我也试过添加 border-box css 属性用于页面布局，但表格仍然溢出。

添加图片以供参考：

代码段

* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  font-family: 'segoe ui';
}

.wrapper {
  max-width: 100%;
}

img {
  width: 100%;
}

.myAccount-wrapper {
  width: 90%;
  margin: 0 auto;
  .myAccount-section {
    display: flex;
    flex-wrap: wrap;
    .account-img {
      img {
        width: auto;
        @media (min-width: 544px) and (max-width: 991px) {
          width: 100%;
        }
      }
    }

    .account-img,
    .account-form {
      flex-grow: 1;
    }
  }
}

// my account section
.profile-details {
  display: flex;
}

// form styling
input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label {
  top: 0px;
  bottom: 0px;
  left: 0px;
  font-size: 11px;
  opacity: 1;
  padding: 0px 0 0 15px;
}

.profile-name {
  position: relative;
}

.inputText {
  font-size: 14px;
  width: 200px;
  height: 35px;
}

.floating-label {
  position: absolute;
  pointer-events: none;
  left: 0px;
  top: 0px;
  transition: 0.2s ease all;
  padding: 5px;
}

  <body>
   <div id="root">
      <div class="wrapper">
         <main class="main-component">
            <div class="myAccount-wrapper">
               <div class="myAccount-section">
                  <div class="account-img"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScppAjzrG06w7v07vGUeT7E35MSS6Zfry2pEBrCYAxGRjtC7dNHz8JdB5rfJCh5FKaCjY&amp;usqp=CAU" alt="Profile"></div>
                  <div class="account-form">
                     <form>
                        <div class="account-header">
                           <h3 class="">MY ACCOUNT</h3>
                        </div>
                        <div class="profile-name"><input type="text" class="inputText" required=""><span class="floating-label">Name</span></div>
                        <div class="profile-details">
                           <div class="profile-name"><input type="text" class="inputText" required=""><span class="floating-label">Mobile</span></div>
                           <div class="profile-name"><input type="text" class="inputText" required=""><span class="floating-label">Email</span></div>
                        </div>
                     </form>
                  </div>
               </div>
            </div>
         </main>
      </div>
   </div>
</body>

Answer 1

我这样重现上面的代码：

<html>
<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
   
    <style>
* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  font-family: "segoe ui";
}

.wrapper {
  max-width: 100%;
}

img {
  width: 100%;
}

.myAccount-wrapper {
  width: 90%;
  margin: 0 auto;
}
.myAccount-wrapper .myAccount-section {
  display: flex;
  flex-wrap: wrap;
}
.myAccount-wrapper .myAccount-section .account-img img {
  width: auto;
}
@media (min-width: 544px) and (max-width: 991px) {
  .myAccount-wrapper .myAccount-section .account-img img {
    width: 100%;
  }
}
.myAccount-wrapper .myAccount-section .account-img,
.myAccount-wrapper .myAccount-section .account-form {
  flex-grow: 1;
}

.profile-details {
  display: flex;
}

input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label {
  top: 0px;
  bottom: 0px;
  left: 0px;
  font-size: 11px;
  opacity: 1;
  padding: 0px 0 0 15px;
}

.profile-name {
  position: relative;
}

.inputText {
  font-size: 14px;
  width: 200px;
  height: 35px;
}

.floating-label {
  position: absolute;
  pointer-events: none;
  left: 0px;
  top: 0px;
  transition: 0.2s ease all;
  padding: 5px;
}
    </style>
</head>

 <body>
   <div id="root">
      <div class="wrapper">
         <main class="main-component">
            <div class="myAccount-wrapper">
               <div class="myAccount-section">
                  <div class="account-img"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScppAjzrG06w7v07vGUeT7E35MSS6Zfry2pEBrCYAxGRjtC7dNHz8JdB5rfJCh5FKaCjY&amp;usqp=CAU" alt="Profile"></div>
                  <div class="account-form">
                     <form>
                        <div class="account-header">
                           <h3 class="">MY ACCOUNT</h3>
                        </div>
                        <div class="profile-name"><input type="text" class="inputText" required=""><span class="floating-label">Name</span></div>
                        <div class="profile-details">
                           <div class="profile-name"><input type="text" class="inputText" required=""><span class="floating-label">Mobile</span></div>
                           <div class="profile-name"><input type="text" class="inputText" required=""><span class="floating-label">Email</span></div>
                        </div>
                     </form>
                  </div>
               </div>
            </div>
         </main>
      </div>
   </div>
</body>

我想你可以使用 flex-wrap: wrap;对于 .profile-details.

Answer 2

不是你想要的，但你可以做到。

一种简单的基本形式，您可以使用它来代替您正在使用的 rn。

* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: grid;
  place-items: center;
}

.form-container {
  position: relative;
  width: 450px;
  display: flex;
  align-items: center;
  padding-bottom: 2rem;
  flex-direction: column;
}

.form-container svg {
  width: 240px;
  height: 240px;
  fill: #0071e3;
}

.form-container form {
  width: 100%;
  display: flex;
  padding: 0 2rem;
  flex-direction: column;
}

.form-container h3,
.form-container input {
  font-family: Inter, sans-serif, system-ui;
}

.form-container h3 {
  font-size: 2rem;
  text-align: center;
}

.form-container input {
  font-size: 1rem;
  padding: 0.75rem;
  border: 1px solid #c1c1c1;
}

.form-container input:not(:first-child) {
  margin-top: 1rem;
}

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet" />

<div class="form-container">
  <svg width="24" height="24" viewBox="0 0 24 24">
        <path d="M12 2C6.579 2 2 6.579 2 12s4.579 10 10 10 10-4.579 10-10S17.421 2 12 2zm0 5c1.727 0 3 1.272 3 3s-1.273 3-3 3c-1.726 0-3-1.272-3-3s1.274-3 3-3zm-5.106 9.772c.897-1.32 2.393-2.2 4.106-2.2h2c1.714 0 3.209.88 4.106 2.2C15.828 18.14 14.015 19 12 19s-3.828-.86-5.106-2.228z"></path>
    </svg>
  <form class="basic-form">
    <h3>My Account</h3>
    <input type="text" placeholder="Name" />
    <input type="text" placeholder="Mobile" />
    <input type="email" placeholder="Email">
  </form>
</div>

Answer 3

我只是将这段代码添加到您的 CSS/SCSS 文件中：

@media (max-width: 422px) {
    .profile-details {
        flex-direction: column;
    }
 }

而且在422px分辨率下也能正常工作。您可以根据需要设置任何其他 max-width。我还删除了 .inputText 的宽度，因为没有它它也能工作。这是我的全部 CSS 代码：

* {
    box-sizing: border-box;
  }
  body {
    margin: 0px;
    font-family: 'segoe ui';
  }
  .wrapper {
    max-width: 100%;
  }
  img {
    width: 100%;
  }
  .myAccount-wrapper {
    width: 90%;
    margin: 0 auto;
  }
  .myAccount-wrapper .myAccount-section {
    display: flex;
    flex-wrap: wrap;
  }
  .myAccount-wrapper .myAccount-section .account-img img {
    width: auto;
  }
  @media (min-width: 544px) and (max-width: 991px) {
    .myAccount-wrapper .myAccount-section .account-img img {
      width: 100%;
    }
  }
  .myAccount-wrapper .myAccount-section .account-img, .myAccount-wrapper .myAccount-section .account-form {
    flex-grow: 1;
  }
  .profile-details {
    display: flex;
  }
  input:focus ~ .floating-label, input:not(:focus):valid ~ .floating-label {
    top: 0px;
    bottom: 0px;
    left: 0px;
    font-size: 11px;
    opacity: 1;
    padding: 0px 0 0 15px;
  }
  .profile-name {
    position: relative;
  }
  .inputText {
    font-size: 14px;
    /* width: 200px; */
    height: 35px;
  }
  .floating-label {
    position: absolute;
    pointer-events: none;
    left: 0px;
    top: 0px;
    transition: 0.2s ease all;
    padding: 5px;
  }

  @media (max-width: 422px) {
    .profile-details {
        flex-direction: column;
    }
  }

内容从正文中溢出

Content is overflowing from the body

html

css

overflow

page-layout

不是你想要的，但你可以做到。