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

Вот макет того, как вы можете исправить эту проблему, используя медиа-запросы.Основной принцип:

• Два контейнера вместе занимают ширину окна просмотра.
• После того, как окно просмотра 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, если вы хотите, чтобы контейнер прокручивался, чтобы вместить все содержимое, сохраняя при этом фиксированную высоту.