Я новичок во флексбоксе и растягиваю волосы из-за чего-то очень простого. В настоящее время я пытаюсь создать контейнер с некоторыми элементами, и он нормально отображается в моем браузере, но когда я пытаюсь изменить размер браузера, все начинает расширяться за пределы своего контейнера.

enter image description here enter image description here

На второй фотографии текст и изображения начинают переполняться, и я бы хотел оставить их внутри белого контейнера.

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

Любая помощь будет принята с благодарностью! Спасибо! :-)

0
Tim 25 Сен 2018 в 21:58

2 ответа

Лучший ответ

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

  • Два контейнера вместе занимают ширину окна просмотра.
  • После окна просмотра 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>
1
A.Broderick 25 Сен 2018 в 20:41

Поскольку вы установили высоту Container2 на фиксированное значение 100vh, кажется, что она не будет расширяться, когда контент займет больше места. Вам следует попробовать использовать min-height: 100vh. Таким образом, контейнер останется размером с экран, но при необходимости увеличится. Вы также можете попробовать использовать overflow-y: scroll, если хотите, чтобы контейнер прокручивался, чтобы поместиться во все содержимое, сохраняя при этом фиксированную высоту.

1
A.Broderick 25 Сен 2018 в 20:22