html - Flexbox - 如何防止扩展超出它的容器

Question

我是 flexbox 的新手，我正在为一些非常简单的事情而烦恼。目前，我正在尝试创建一个包含一些元素的容器，它在我的浏览器上显示正常，但当我尝试调整浏览器大小时，所有内容都开始扩展到其容器之外。

在第二张照片中，文字和图像开始溢出，我想将其保存在白色容器中。

return <div id="parent" className="Container2">
            <div className="container2_title">
              <div className="title">
                <p>Parking — A Problem Worth Solving</p>
              </div>
            </div>
            <div className="container2_content">
              <div className="row" style={{ textAlign: 'left' }}>
                <img src={timer} style={{ float: "left" }} />
                <p>
                  An average person in the U.S. spends about
                  <span className="purk-color">
                    17 hours per year
                  </span>
                  searching for parking. In metropolitan areas like Los Angeles, this number goes up to
                  <span className="purk-color">
                    85 hours per year
                  </span>.
                </p>
                <p>
                  Additionally, it takes
                  <span className="purk-color">
                    15–32 minutes per trip
                  </span>
                  to find a parking spot.
                </p>
              </div>
              <div className="row" style={{textAlign: 'right'}}>
                <img src={charging} style={{ float: "right" }} />
                <p>
                  <span className="purk-color">63% </span>
                  of Americans reported that they avoided driving to a destination due to parking.
                  </p>
                <p>
                  Parking accounts for
                    <span className="purk-color">
                    30% of traffic
                    </span>, produces
                    <span className="purk-color">
                    2.5M tons of harmful emissions
                    </span>, and wastes
                    <span className="purk-color">
                    260M gallons of gas
                    </span>.
                  </p>
              </div>
              <div className="row" style={{ textAlign: 'left' }}>
                <img src={moneybag} style={{ float: "left" }} />
                <p>
                  Overpaying for parking costs the U.S.
                  <span className="purk-color">
                    20B annually
                  </span>. In the top 10 busiest cities in America, this averages out to
                  <span className="purk-color">
                    $1205 per driver per year.
                  </span>
                </p>
                <p>
                  In cities like Los Angeles, it costs about
                  <span className="purk-color"> $200 per </span>
                  month for long term parking, and about
                  <span className="purk-color"> $14 for two-hour </span>
                  parking.
                </p>
              </div>
            </div>
          </div>;

这是我的CSS:

.Container2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* overflow: hidden; */
  color: #fff;
  /* background-color: #ffa38b; */
  background-color: #ffffff;
  height: 100vh;
}

.container2_title {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex: 0 0 100%;
  min-width: 100%;
  align-self: center;

  font-size: 7vh;
  color: #777777;
}

.container2_content {
  color: #777777;
  padding-left: 10%;
  padding-right: 10%;
}

.container2_content .row {
  height: 15%;
}

.purk-color {
  color: #ffa38b;
}

.container2_content img {
  height: 50%;
  width: 50%;
  padding: 0;
}

任何帮助将不胜感激!谢谢你! :-)

Answer 1

Here is a mockup了解如何使用媒体查询纠正此问题。基本原则是:

• 两个容器合起来占据了 View 窗口的宽度。
• 在 View 窗口 width 低于 600px 之后。两个容器的 width 发生变化，因此它们占据了 View 窗口的 100%

当屏幕尺寸太小时，这是最常见的显示方式，可以在一行中对多个部分的内容实现响应式设计。

body {
	font-family: arial;
}

.container {
	width: 95%;
	max-width: 1024px;
	margin: 0 auto;
}

.sub-container {
	box-sizing: border-box;
	display: inline-block;
	border: 1px solid black;
	width: 49%;
	padding: 20px;
	margin-top: 10px;
}

@media only screen and (max-width: 600px) {
   
    .sub-container {
    	display: block;
    	width: 100%;
    }

}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
	<div class="container">
		<div class="sub-container">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
		<div class="sub-container">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
	</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>