Как правильно расположить flexbox с большей площадью сверху

Question

У меня есть контейнер, который я пытаюсь заставить работать, и я знаю, что есть некоторые медиа-запросы, которые мне придется выяснить позже, но я даже не могу заставить работать оригинальный макет. Идея заключалась в том, чтобы обернуть поверх всего, чтобы держать его в контейнере, а затем «#about» согнуть влево, а затем с помощью «.container2» на правой стороне, равномерно разделить 2больше разделов по вертикали (#map и #info). Позже я буду работать над медиа-запросами, но я приложил картину того, что я более или менее пытаюсь решить. Вот мой кодовый блок, также показывающий, что я смог выяснить до сих пор.

Codepen

Изображение того, что я пытаюсь выполнить(набросок)

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

.container {
    width: 80%; 
    margin: auto;
    overflow: hidden;
}
.wrapper {
    width: 100%;
    display: flex;
    flex-flow: wrap;
}
.box {
    text-align: left;
    padding: 20px;
  }
    #map {
        margin: auto;
        background-color: yellow;
        border-radius: 5px;
    }

    #info {
      margin: auto;
      background-color: green;
    }

    #about {
        width: 100%;
    }
 #about {
      order: -1;
      width: 48%;
    }
.container2 {
  width: 48%;
}     

    <div class="container">
            <div class="wrapper">
                    <div class="box" id="about">
                    <h3>Company Main</h3>                    
                      <p> 
                          Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam id tempore accusamus eaque quidem quo dicta. Quo totam dolor eius dolorem hic a fugit eligendi. <br><br>      Asperiores, iure repellendus facilis cum sapiente unde repudiandae perferendis excepturi ipsam tenetur magnam ex tempore rem fugiat, doloribus beatae consectetur impedit atque voluptates vel. <br><br> Repudiandae perspiciatis quo consectetur deserunt iusto voluptatum, cumque fugiat rem recusandae totam et cum sunt saepe neque ab delectus, modi dicta accusamus voluptatibus culpa corporis nobis. Harum cum quas eum architecto distinctio quia dolorum, ducimus optio libero suscipit hic officiis explicabo beatae ullam, molestiae repudiandae non minus consequuntur facilis quibusdam ipsa quam. <br><br> Quas assumenda tempora excepturi rerum in deleniti labore laboriosam saepe voluptates nulla quidem placeat asperiores alias fugiat numquam corrupti impedit minima, reprehenderit molestias, repellat nemo pariatur animi adipisci aspernatur. Facilis aut ipsum, atque vero voluptatum in rerum ab eum rem eos unde adipisci? <br><br> Beatae modi veritatis officia minus vero cumque a pariatur quod libero quas expedita inventore eligendi, laboriosam, id voluptatibus! Dolor nam incidunt exercitationem molestiae ea porro ipsam explicabo reiciendis necessitatibus voluptates et quidem ipsa aspernatur suscipit eos quaerat magni culpa debitis perspiciatis esse, dicta vero doloribus iste? <br><br> Consectetur culpa assumenda dolore provident voluptatem dolor eum repellat harum.
                        </p>
                    </div>
                    <div class="wrapper container2">
                      <div class="box" id="map">
                        <p>      
                            hello Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                        </p>
                      </div>
                      <div class="box" id="info">
                        <p>  Corporate Headquarters <br>
                            XXXX Main Street <br>
                           Capital City, ST 80004 <br><br>
    
                            P.O. Box 101 <br>
                            Capital, ST 11011 <br><br>
                            
                            888.888.8888 <br>
                            Fax 888.888.8881 <br>
                        </p>
                      </div>
                    </div>
            </div>
    </div>

Answer 1

Я думаю, что вы ищете гибкое основание и гибкое направление.

Вы должны добавить класс container1 в свой первый контейнер абзаца рядом с полем.

затем обновите ваш код, чтобы отразить эти изменения, я удалил все ваши CSS, и строки ниже были всем, что требовалось для выполнения скетча, который вы предоставили

.wrapper{
  display: flex;
}

.container1{
    flex-basis: 100%;
}

.container2{
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
}

Надеюсь, это то, что выищем