Flex-Box高度，缩放页面时不相等

Question

我对 flexbox 有疑问，其中并排的 2 个 flex 框在缩放页面时不共享相同的高度。我将在下面包含一张图片，但一个框包含一个 react-bootstrap 轮播，而另一个包含文本。如何将它们保持在相同的高度，以便它们可以在所有屏幕尺寸上缩放？

这是 JSX

          <div className={styles.floatchild1}>
            <Carousel fade className={styles.viewMap}>
              <Carousel.Item>
                <img
                  className="d-block w-100"
                  src="/open.jpeg"
                  alt="Front View of HICO Storage Unit, Grand Junction Colorado"
                />
              </Carousel.Item>
              <Carousel.Item>
                <img
                  className="d-block w-100"
                  src="/inside.jpeg"
                  alt="Inside of HICO Storage Unit, Grand Junction Colorado"
                />
              </Carousel.Item>
              <Carousel.Item>
                <img
                  className="d-block w-100"
                  src="/side-view-container.jpeg"
                  alt="Side View of HICO Storage Unit, Grand Junction Colorado"
                />
              </Carousel.Item>
            </Carousel>
            <Button
              className={styles.viewMapButton}
              href="https://www.google.com/maps/place/2487+Commerce+Blvd,+Grand+Junction,+CO+81505/@39.0906152,-108.5944703,17z/data=!3m1!4b1!4m5!3m4!1s0x87471d18f2c3486b:0xe36fb2de2017f121!8m2!3d39.0906111!4d-108.5922816"
              target="_blank"
            >
              + View Map
            </Button>
            <div className={styles.buttonIdRow}>
              <p></p>
              <a>Jump to:</a>
              <a href="#units">Units</a>
            </div>
          </div>

          <div className={styles.floatchild2}>
            <p>
              Self Storage in <u>Grand Junction</u>, Co
            </p>
            <h2 className={styles.hicoLogo}>
              <b>
                <u>HICO Storage Company</u>
              </b>
            </h2>
            <div className={styles.addressPhone}>
              <h3 className={styles.address}>
                <div className={styles.pinPicture}>
                  <Image
                    src="/pin.png"
                    alt="location pin"
                    width={20}
                    height={28}
                  />{" "}
                </div>
                <div className={styles.location}>
                  2487 Commerce Blvd, Grand Junction, CO 81505
                </div>
              </h3>
              <h3 className={styles.phoneWrapper}>
                <div className={styles.phonePicture}>
                  <Image
                    src="/phone.png"
                    alt="location pin"
                    width={25}
                    height={25}
                  />{" "}
                </div>
                <div className={styles.phone}>
                  <a className={styles.phoneColor} href="tel:8088962272">
                    <b>808-896-2272</b>
                  </a>
                </div>
              </h3>
            </div>
            <hr />
            <div className={styles.hours}>
              <div className={styles.officeHours}>
                <p className={styles.TimeTitle}>Office Hours</p>
                <p className={styles.TimeP}>
                  8:30am - 5:30pm Monday - Saturday
                </p>
                <p className={styles.TimeP}>10:30am - 3:30pm Sunday</p>
              </div>
              <div className={styles.officeHours}>
                <p className={styles.TimeTitle}>Gate Hours</p>
                <p className={styles.TimeP}>24/7 access</p>
              </div>
            </div>
            <hr />
<Button href='/contact' className={styles.interestedButton}>Interested? Contact Us</Button>
          </div>
        </div>

这是我用来设置样式的CSS


.wrapper {
  overflow: hidden;
  min-width: 300px;
  display: flex;
  flex-direction: row;
  width: 90%;
  font-family: 'southern';
  align-items: center;

}

.floatchild1{
  background: white;
  flex:1;
  min-width: 380px;
  align-items: center;
}

.floatchild2 {
  background: white;
  flex:1;
  min-width: 380px;
  align-items: center;
  padding: 4%;
}

Answer 1

改变一下

align-items: center;

在.wrapper到

align-items: stretch;

工作代码笔：https://codepen.io/maty1000/pen/oNEqvGY

Flex-Box高度，缩放页面时不相等

Flex-Box height, not equal when scaling page

css

flexbox