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 了解如何使用媒体查询来纠正此问题。基本原理是：

• 两个容器组合起来占据了视图窗口的宽度。
• 在查看窗口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>

Answer 2

因为你已经将Container2的高度设置为100vh的固定值，所以当内容占用更多空间时，它似乎不会展开。您应该尝试使用min-height: 100vh。这样，容器将保持屏幕大小，但如果需要，可以增加。如果您希望容器在保持固定高度的同时滚动以适应所有内容，也可以尝试使用 overflow-y: scroll。