div使内容溢出，此滚动水平是可用的。如何正确调整尺寸？

Question

我正在制作一个个人资料页，在制作之后，我有一个问题，其中有水平滚动。据我所知，这是某种溢出的结果。我已经寻找了一段时间，我得到的最接近的解决方案是给.profilePg一个更小的宽度，但这就毁了UI布局。

，我可以更改什么来防止这种溢出，从而防止水平滚动？

下面是一个带有代码的https://jsfiddle.net/。

​

.profilePg {
  background-color: grey;
  margin-left: 222px;
  /* width: 85%; */
  height: 100%;
  text-align: center;
  /* margin-left: auto; */
}

.topProfDiv {
  /* background-color: lightblue; */

  text-align: left;
  /* margin-top: 30px; */
  /* margin-right: auto;
  margin-left: auto; */
  /* text-align: center; */
  background-color: #2E2E2E;
  /* border-radius: 27px; */
  /* display: inline-block; */
  width: 100%;
  height: 400px;

  font-size: 12px;
  font-weight: 600;

  border-bottom: 1px solid black;

  /* vertical-align: top; */
  /* display: inline-grid; */
}

/* .leftProfileDiv, .bannerDiv { */
  /* background-color: black; */
  /* display: inline-block; */
  /* margin-top: 11px; */
  /* height: 90%; */
/* } */

.leftProfileDiv {
  /* display: inline-block; */

  /* background-color: darkblue; */
  /* margin-top: 25px; */
  margin-left: 30px;
  /* vertical-align: top; */
  width: 100%;
  height: 40%;
  /* text-align: center; */
}

.leftProfileDiv p {
  display: inline-block;

  /* margin-top: 50px; */
  margin-left: 25px;

  /* margin-top: 40px; */
  color: grey;
  cursor: pointer;
}
.leftProfileDiv h2 {
  /* background: grey; */
  /* width: 90%; */
  font-size: 18px;
  margin: 0px;
  margin-top: 50px;
  margin-left: 25px;

  display: inline-block;

  vertical-align: middle;
}
/* .leftProfileDiv h3 {
  margin: 0px;
  margin-top: 50px;

  display: inline-block;
} */
/* .leftProfileDiv h4 {
  display: inline-block;
} */
.profileInfoDiv {
  display: inline-block;
  width: 50%;
  height: 100%;
  /* background: lightblue; */
  /* margin: 0px; */
  vertical-align: middle;
}

.profileInfoDiv h4 {
  margin-left: 25px;
}

/* #profStats {
  color: #A0A0A0;
  font: Arial;
  font-family: sans-serif;
  font-size: 18;
}

#numberSubs {
  color: #A0A0A0;
  font: Arial;
  font-family: sans-serif;
  font-weight: 600;
} */

#profileStats {
  margin-left: 10px;
  color: #A0A0A0;
  font-size: 14px;
}

#profileCaption {
  font-size: 15px;
  font-weight: 500;
  color: #CCCCCC;
  /* white */
}

#seperator {
  font-size: 25px;
  /* color: #CCCCCC; */
}

/* #numberSubs {
  color: white;
  font-weight: 600;
} */

#profileSubscribeBtn {
  color: white;
  font-size: 17px;
  font-weight: 600;
  width: 200px;
  height: 55px;
  background-color: #4549F1;
  border-radius: 30px;
  border: none;
  cursor: pointer;

  /* margin-left: 25%; */
  /* 68px; */
  /* margin-right: 10px; */
  position: absolute; /*or fixed*/
  right: 30px;
  margin-top: 50px;
}
/* #profileSubscribeBtn:active {
  background-color: #4549F1;
} */

.leftProfileDiv img {
  display: inline-block;
  vertical-align: middle;

  /* margin-top: 50px; */
  width: 100px;
  height: 100px;
  border: 1.5px solid transparent;
  border-radius: 50px;
}

/* .leftProfileDiv img:hover {
  border: solid #4152F1 1.5px;
} */

/* .profileContentDiv {
  width: 100%;
} */

#profileUsername {
  cursor: default;
  color: white;
}

.bannerDiv {
  /* margin-top: 12px; */
  /* margin-left: 15px; */
  width: 100%;
  height: 60%;
  /* border-radius: 17px; */
  cursor: default;
}

.banner {
  /* background-color: blue; */
  background-image: url('../images/profileImage.png');
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  /* border-radius: 17px; */
}

      <div class="topProfDiv">
        <div class="bannerDiv">
          <!-- <img src="images/testImg.png"> -->
          <div onclick='pickFile()' id="banner" class="banner"><input style='display: none;' type="file" id="fileButton" value="upload"/></div>
        </div>

        <div class="leftProfileDiv">
          <img id="profImage" src="images/defaultProfImg.png">
          <div class="profileInfoDiv">
            <h2 id="profileUsername">username</h2>
            <h2 id="profileStats">200 Subscribers</h2>
            <!-- <h2 id="profileStats"><a id="seperator">|</a> 200 Subscribers</h2> -->
            <h4 id="profileCaption">This user is yet to add a bio...</h4>
            <!-- <p id="signout">Sign out</p> -->
          </div>
          <button id="profileSubscribeBtn">Subscribe</button>
          <!-- <p id="signout">Sign out</p> -->
        </div>
        <!-- <div class="bannerDiv">
          <div onclick='pickFile()' id="banner" class="banner"><input style='display: none;' type="file" id="fileButton" value="upload"/></div>
        </div> -->
      </div>

​

Answer 1

使用calc类应用宽度，因为您在.leftProfileDiv上应用了margin-left

.leftProfileDiv {
  /* display: inline-block; */

  /* background-color: darkblue; */
  /* margin-top: 25px; */
  margin-left: 30px;
  /* vertical-align: top; */
  width: calc(100% - 30px);
  height: 40%;
  /* text-align: center; */
}

​

.profilePg {
  background-color: grey;
  margin-left: 222px;
  /* width: 85%; */
  height: 100%;
  text-align: center;
  /* margin-left: auto; */
}

.topProfDiv {
  /* background-color: lightblue; */

  text-align: left;
  /* margin-top: 30px; */
  /* margin-right: auto;
  margin-left: auto; */
  /* text-align: center; */
  background-color: #2E2E2E;
  /* border-radius: 27px; */
  /* display: inline-block; */
  width: 100%;
  height: 400px;

  font-size: 12px;
  font-weight: 600;

  border-bottom: 1px solid black;

  /* vertical-align: top; */
  /* display: inline-grid; */
}

/* .leftProfileDiv, .bannerDiv { */
  /* background-color: black; */
  /* display: inline-block; */
  /* margin-top: 11px; */
  /* height: 90%; */
/* } */

.leftProfileDiv {
  /* display: inline-block; */

  /* background-color: darkblue; */
  /* margin-top: 25px; */
  margin-left: 30px;
  /* vertical-align: top; */
  width: calc(100% - 30px);
  height: 40%;
  /* text-align: center; */
}

.leftProfileDiv p {
  display: inline-block;

  /* margin-top: 50px; */
  margin-left: 25px;

  /* margin-top: 40px; */
  color: grey;
  cursor: pointer;
}
.leftProfileDiv h2 {
  /* background: grey; */
  /* width: 90%; */
  font-size: 18px;
  margin: 0px;
  margin-top: 50px;
  margin-left: 25px;

  display: inline-block;

  vertical-align: middle;
}
/* .leftProfileDiv h3 {
  margin: 0px;
  margin-top: 50px;

  display: inline-block;
} */
/* .leftProfileDiv h4 {
  display: inline-block;
} */
.profileInfoDiv {
  display: inline-block;
  width: 50%;
  height: 100%;
  /* background: lightblue; */
  /* margin: 0px; */
  vertical-align: middle;
}

.profileInfoDiv h4 {
  margin-left: 25px;
}

/* #profStats {
  color: #A0A0A0;
  font: Arial;
  font-family: sans-serif;
  font-size: 18;
}

#numberSubs {
  color: #A0A0A0;
  font: Arial;
  font-family: sans-serif;
  font-weight: 600;
} */

#profileStats {
  margin-left: 10px;
  color: #A0A0A0;
  font-size: 14px;
}

#profileCaption {
  font-size: 15px;
  font-weight: 500;
  color: #CCCCCC;
  /* white */
}

#seperator {
  font-size: 25px;
  /* color: #CCCCCC; */
}

/* #numberSubs {
  color: white;
  font-weight: 600;
} */

#profileSubscribeBtn {
  color: white;
  font-size: 17px;
  font-weight: 600;
  width: 200px;
  height: 55px;
  background-color: #4549F1;
  border-radius: 30px;
  border: none;
  cursor: pointer;

  /* margin-left: 25%; */
  /* 68px; */
  /* margin-right: 10px; */
  position: absolute; /*or fixed*/
  right: 30px;
  margin-top: 50px;
}
/* #profileSubscribeBtn:active {
  background-color: #4549F1;
} */

.leftProfileDiv img {
  display: inline-block;
  vertical-align: middle;

  /* margin-top: 50px; */
  width: 100px;
  height: 100px;
  border: 1.5px solid transparent;
  border-radius: 50px;
}

/* .leftProfileDiv img:hover {
  border: solid #4152F1 1.5px;
} */

/* .profileContentDiv {
  width: 100%;
} */

#profileUsername {
  cursor: default;
  color: white;
}

.bannerDiv {
  /* margin-top: 12px; */
  /* margin-left: 15px; */
  width: 100%;
  height: 60%;
  /* border-radius: 17px; */
  cursor: default;
}

.banner {
  /* background-color: blue; */
  background-image: url('../images/profileImage.png');
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  /* border-radius: 17px; */
}

<div class="topProfDiv">
        <div class="bannerDiv">
          <!-- <img src="images/testImg.png"> -->
          <div onclick='pickFile()' id="banner" class="banner"><input style='display: none;' type="file" id="fileButton" value="upload"/></div>
        </div>

        <div class="leftProfileDiv">
          <img id="profImage" src="images/defaultProfImg.png">
          <div class="profileInfoDiv">
            <h2 id="profileUsername">username</h2>
            <h2 id="profileStats">200 Subscribers</h2>
            <!-- <h2 id="profileStats"><a id="seperator">|</a> 200 Subscribers</h2> -->
            <h4 id="profileCaption">This user is yet to add a bio...</h4>
            <!-- <p id="signout">Sign out</p> -->
          </div>
          <button id="profileSubscribeBtn">Subscribe</button>
          <!-- <p id="signout">Sign out</p> -->
        </div>
        <!-- <div class="bannerDiv">
          <div onclick='pickFile()' id="banner" class="banner"><input style='display: none;' type="file" id="fileButton" value="upload"/></div>
        </div> -->
      </div>

​