flexbox с изображениями, фиксированный размер

Question

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

Что я делаю не так? Я думаю, что страдаю психическим расстройством, потому что я впервые использую 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

Не уверен, что если вы хотите, весь контейнер в том же столбце можно сделать так:

<code>   <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>