html - 带有图像的 flexbox，固定大小

Question

我创建了这个布局，它几乎就在那里，但我正在努力处理它旁边的图像和文本。我希望整个盒子同时 flex ，以保持图像和文本同时响应。

我做错了什么？我想我是有心理障碍，因为这是我第一次使用 flex。

.container {
  max-width: 1750px;
}

.venture,
#event-content,
#news-content {
  background-color: #eaeaea;
  color: #444;
}

.catch {
  color: #fff;
  text-align: center;
  margin: 1vmin 0vmin 0vmin 0vmin;
  padding: 20px 50px;
  background-color: #3366cc;
}

.tagline {
  margin-top: 5%;
  text-align: center;
  font-weight: bold;
  font-size: 130%;
}

#news-content a:link,
#news-content a:hover,
#news-content a:visited {
  text-decoration: none;
  color: #444;
  font-family: FG Font;
  font-size: 2vmin;
}

#news-content .btn.btn-primary {
  background-color: #3366cc;
  font-family: Arial;
  border-color: #3366cc;
}

#news-content .tag {
  background-color: #ef8b1e;
  display: inline-block;
  padding: 5px;
  border-radius: 0px 0px 5px 5px;
  font-size: 1.5vmin;
  font-family: FG Font;
}

#news-content .title {
  padding: 25px 10px 0px 10px;
}

#event-content .date {
  background-color: #ef8b1e;
  font-family: FG Font;
  font-size: 3vmin;
  display: inline-block;
  text-align: center;
}

.main-wrapper {
  display: flex;
  flex-wrap: nowrap;
  height: 70vh;
  align-items: stretch;
}

.main-wrapper>div {
  width: 50%;
  min-height: 50vh;
}

.hero-img {
  display: flex;
}

.hero-img>div {
  margin: 1vmin;
  align-self: stretch;
  flex-basis: 50%;
}

.info-section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.info-section .media-section {
  margin: 1vmin 0vmin;
}

.info-section .venture {
  position: relative;
  padding: 3vmin 3vmin 2vmin 3vmin;
}

.media-section>div {
  display: flex;
  flex-direction: row;
}

.media-section>div>div {
  flex-basis: 50%;
}

#news-content {
  margin-right: .5vmin;
}

#event-content {
  margin-left: .5vmin;
}

#news-content,
#event-content {
  max-height: 150px;
}

<div class="container">
  <div class="main-wrapper">
    <div>
      <div class="hero-img">
        <div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Ship" /></div>
        <div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Ship" /></div>
      </div>
      <div class="hero-img">
        <div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Air" /></div>
        <div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Helicopter" /></div>
      </div>
    </div>
    <div>
      <div class="info-section">
        <div class="catch">
          <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
        </div>
        <div class="media-section">
          <div>
            <div id="news-content">
              <div class="tag">In the News</div>
              <div class="title"><a href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a></div>
              <a href="">
                <div class="btn btn-primary">Link</div>
              </a>
            </div>
            <div id="event-content">
              <div class="date">
                <div class="num">12</div>
                <div class="month">DEC</div>
              </div>
              <div class="details">
                <div class="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
                <div class="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
              </div>
            </div>
          </div>
        </div>
        <div class="venture">
          <h2>Lorem ipsum dolor sit ametn<br>Lorem ipsum dolor sit amet</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam diam non mollis sollicitudin. Curabitur sed felis ac urna laoreet finibus nec eu sem. Fusce cursus tortor eget lectus lacinia, id blandit dolor ultrices. Aliquam pellentesque
            venenatis turpis, a viverra ante tincidunt vel. Quisque dui orci, viverra id ipsum eget, dictum mattis ante. Aliquam pellentesque massa et euismod efficitur. Aliquam vestibulum velit et lobortis feugiat. Curabitur vulputate quam efficitur,
            pellentesque ex quis, tincidunt orci. Donec magna est, ultrices nec pretium nec, porta id nisl. Mauris vitae magna ac sem pellentesque hendrerit. Donec elit justo, pulvinar id leo posuere, venenatis mattis nisl. Maecenas tristique augue ut
            odio tincidunt aliquam. Nullam volutpat lobortis eros.</p>
          <div class="tagline">LOREM IPSUM</div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

不确定是否需要，同一列中的整个容器可以这样完成:

   <pre>
    <div class="container">
            <div class="main-wrapper">

                <div>
                    <div class="info-section">
                        <div>
                            <div class="hero-img">
                                <div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Ship" /></div>
                                <div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Ship" /></div>
                            </div>
                            <div class="hero-img">
                                <div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Air" /></div>
                                <div><img src="https://via.placeholder.com/100x100" class="img-fluid" alt="Allied Helicopter" /></div>
                            </div>
                        </div>
                        <div class="catch">
                            <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
                        </div>
                        <div class="media-section">
                            <div>
                                <div id="news-content">
                                    <div class="tag">In the News</div>
                                    <div class="title"><a href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a></div>
                                    <a href="">
                                        <div class="btn btn-primary">Link</div>
                                    </a>
                                </div>
                                <div id="event-content">
                                    <div class="date">
                                        <div class="num">12</div>
                                        <div class="month">DEC</div>
                                    </div>
                                    <div class="details">
                                        <div class="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
                                        <div class="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="venture">
                            <h2>Lorem ipsum dolor sit ametn<br>Lorem ipsum dolor sit amet</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam diam non mollis sollicitudin. Curabitur sed felis ac urna laoreet finibus nec eu sem. Fusce cursus tortor eget lectus lacinia, id blandit dolor ultrices. Aliquam pellentesque
                               venenatis turpis, a viverra ante tincidunt vel. Quisque dui orci, viverra id ipsum eget, dictum mattis ante. Aliquam pellentesque massa et euismod efficitur. Aliquam vestibulum velit et lobortis feugiat. Curabitur vulputate quam efficitur,
                               pellentesque ex quis, tincidunt orci. Donec magna est, ultrices nec pretium nec, porta id nisl. Mauris vitae magna ac sem pellentesque hendrerit. Donec elit justo, pulvinar id leo posuere, venenatis mattis nisl. Maecenas tristique augue ut
                               odio tincidunt aliquam. Nullam volutpat lobortis eros.</p>
                            <div class="tagline">LOREM IPSUM</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
   </pre>