CSS - 响应式相对 Flex div答案

【问题标题】：CSS - Responsive Relative Flex DivsCSS - 响应式相对 Flex div
【发布时间】：2018-08-21 04:56:48
【问题描述】：

我最近一直在练习一些 CSS 并取得了一些进展，但如果 div 的位置设置为 relative 和它包含在另一个设置为 display: flex;.

的 div 中

我尝试修改 div 的左右边距，但这似乎没有在调整视口大小以模拟小型或移动设备屏幕时调整 div 大小的预期效果。

如果有人不介意快速查看我的代码以查看我可能遗漏了什么或哪里出错了，我将非常感谢您的帮助！（如果有人碰巧对我的代码有任何一般性的建议，那也将不胜感激 - 我不是 CSS 方面最好的，所以任何反馈都将不胜感激！）

请参阅下面的 HTML 和 CSS 代码。

谢谢，

杰米

body{
  background-color: #bed3f4;
  margin: 0px;
  padding: 0px;
}

.navbar{
  height: 50px;
  width: 100%;
  background-color: white;
}

.logo{
  font-size: 18px;
  font-family: cursive;
  padding-top: 8px;
  padding-left: 5px;
}

.container{
  display: flex;
  justify-content: center;
  align-items: center;
}

.profile_image{
  height: 200px;
  width: 200px;
  background-color: #c2c4c6;
  border-radius: 5px;
  position: absolute;
  top: 10%;
}

.profile_box{
  position: relative;
  top: 20%;
  height: 600px;
  width: 500px;
  background-color: #fff;
  border-radius: 5px;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 200px;
  margin-left: 20px;
  margin-right: 20px;
}

.name{
  height: 30px;
  width: 200px;
  text-align: center;
  margin-top: 60px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  font-weight: bold;
  font-family: Arial;
}

.user_bio{
  position: relative;
  width: 480px;
  height: 450px;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 5px;
  padding: 10px;
  font-style: Arial;
}

.user_social_icons{
  position: relative;
  width: 100%;
  height: 30px;
  margin-top: 100px;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 5px;
  word-spacing: 10px;
}

<html>
  <head>
    <title>Personal Profile Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="styles.css">
    <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
  </head>
  <body>

    <div class="navbar">
      <div class="logo">Profile Page</div>
    </div>

    <div class="container">

      <div class="profile_box">

        <div class="name">Jamie McGibbon</div>

        <div class="user_bio">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper nulla id leo eleifend, in mattis diam pretium. Proin pellentesque ultrices consectetur. Etiam eget magna leo. Aliquam condimentum nisi leo, vel cursus lorem placerat vitae.</p>

          <p>Quisque pulvinar id sapien eu dapibus. Vestibulum risus dui, aliquam sit amet congue non, egestas a leo. Nam sed eleifend diam. Nullam ultrices vel dolor et mattis. Praesent eu euismod nisl. Ut quis dolor risus. Proin sem diam, hendrerit in dui sit amet, faucibus vulputate ex. Curabitur molestie rhoncus ligula varius scelerisque.</p>

          <div class="user_social_icons">
            <i class="fab fa-facebook-square fa-3x"></i>
            <i class="fab fa-twitter-square fa-3x"></i>
            <i class="fab fa-reddit-square fa-3x"></i>
            <i class="fab fa-github-square fa-3x"></i>
            <i class="fab fa-youtube-square fa-3x"></i>
          </div>

        </div>

      </div>

      <div class="profile_image"></div>

    </div>

  </body>
</html>

【问题讨论】：

当前没有发生的具体应该发生什么？我假设有问题的<div> 是灰色框？
@ObsidianAge - 目前，当页面调整为更小时，白框无法缩放以适应可用空间，导致“用户简介”文本被截断。我希望那个白框可以缩放，这样用户就不必在较小的设备/屏幕上水平滚动。
不要使用固定宽度，而是尝试使用百分比或媒体查询。
@sol - 感谢您的回复。这似乎适用于水平滚动，但引入了一个新问题 - 当我水平调整窗口大小以模拟移动设备的屏幕时，文本和社交图标从白色
中流出。我尝试将那个白色
的高度更改为百分比，但这似乎不起作用。抱歉所有问题，但是如果您可以通过垂直溢出为我指出正确的方向，那也将不胜感激！谢谢！
在.user_bio 上设置width: 100% 似乎对我有用:) 请记住，您还有一些其他固定宽度，可能需要调整以适应:)

【解决方案1】：

一些建议..

您可以在此处删除定位规则。 text-align 似乎可以满足您的需求。从主要内容中删除固定的宽度和高度，这就是导致子元素溢出的原因。

很高兴回答更多问题。

body {
  background-color: #bed3f4;
  margin: 0;
}

.navbar {
  height: 50px;
  width: 100%;
  background-color: white;
}

.logo {
  font-size: 18px;
  font-family: cursive;
  padding-top: 8px;
  padding-left: 5px;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 100px;
}

.profile_image {
  height: 200px;
  width: 200px;
  background-color: #c2c4c6;
  border-radius: 5px;
  position: relative;
  z-index: 1;
  margin-top: 20px;
  margin-bottom: -20px;
}

.profile_box {
  width: 70%;
  background-color: #fff;
  border-radius: 5px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 50px;
}

.name {
  text-align: center;
  margin-top: 60px;
  font-size: 20px;
  font-weight: bold;
}

.user_bio {
  border-radius: 5px;
  padding: 10px;
  font-style: Arial;
  text-align: center;
}

.user_social_icons {
  margin-top: 100px;
  text-align: center;
  border-radius: 5px;
  word-spacing: 10px;
}

<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet" />
<div class="navbar">
  <div class="logo">Profile Page</div>
</div>

<div class="container">
  <div class="profile_image"></div>
  <div class="profile_box">

    <div class="name">Jamie McGibbon</div>

    <div class="user_bio">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper nulla id leo eleifend, in mattis diam pretium. Proin pellentesque ultrices consectetur. Etiam eget magna leo. Aliquam condimentum nisi leo, vel cursus lorem placerat vitae.</p>

      <p>Quisque pulvinar id sapien eu dapibus. Vestibulum risus dui, aliquam sit amet congue non, egestas a leo. Nam sed eleifend diam. Nullam ultrices vel dolor et mattis. Praesent eu euismod nisl. Ut quis dolor risus. Proin sem diam, hendrerit in dui
        sit amet, faucibus vulputate ex. Curabitur molestie rhoncus ligula varius scelerisque.</p>

      <div class="user_social_icons">
        <i class="fab fa-facebook-square fa-3x"></i>
        <i class="fab fa-twitter-square fa-3x"></i>
        <i class="fab fa-reddit-square fa-3x"></i>
        <i class="fab fa-github-square fa-3x"></i>
        <i class="fab fa-youtube-square fa-3x"></i>
      </div>

    </div>

  </div>



</div>

【讨论】：