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

我对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;
}

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

最佳答案

Here is a mockup有关如何使用媒体查询纠正此问题的信息。基本原理是：


这两个容器合起来占据了视图窗口的宽度。
在查看窗口width进入600px下面之后。两个容器的width都发生变化，因此它们占据了视图窗口的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>