Верстка блоков выходящих за контейнер

Question

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

ymaps.ready(init);

function init() {
  var myMap = new ymaps.Map("map", {
    center: [55.76, 37.64],
    zoom: 7
  });
  myMap.controls.remove('searchControl')
  myMap.controls.remove('trafficControl')
  myMap.controls.remove('fullscreenControl')
  myMap.controls.remove('rulerControl')
  myMap.controls.remove('typeSelector')
}

* {
    box-sizing: border-box;
}

.container {
    margin: 0 auto;
    padding: 0 50px;
    max-width: 1700px;
  }

  .contacts__container {
    display: flex;
  }

  .contacts__content {
    position: relative;
  }

  .contacts__left-column {
    padding: 124px 122px 124px 0;
    border-top: 1px solid #cacaca;
  }

  .contacts__left-column-heading {
    font-size: 24px;
    line-height: 32px;
  }

  .contacts__form {
    display: flex;
    flex-direction: column;
    max-width: 700px;
  }

  .contacts__map {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 70%;
    max-width: 1239px;
    border-left: 1px solid #cacaca;

  }

  .contacts__address {
    margin-bottom: 27px;
    font-size: 16px;
    line-height: 32px;
    font-style: normal;
  }

  [class*="-ground-pane"] {
    filter: grayscale(1);
  }

  .contacts__form-elem {
    margin-bottom: 23px;
  }

  .contacts__input {
    padding: 0 24px;
    min-width: 400px;
    min-height: 40px;
    border: 1px solid #cacaca;
    border-radius: 100px;
  }

  .contacts__form-btn {
    margin-bottom: 38px;
    align-self: flex-start;
    color: #cacaca;
  }

<section class="contacts">
    <div class="container">
      <h2 class="subheading contacts__subheading">Заголовок секции</h2>
    </div>
    <div class="contacts__content">
      <div class="container contacts__container">
        <div class="contacts__left-column">
          <h3 class="text-reset contacts__left-column-heading font-bold">Заголовок</h3>
          <address class="contacts__address">Подзаголовок</address>
          <h3 class="contacts__left-column-heading">Другой подзаголовок</h3>
          <form class="contacts__form">
            <div class="contacts__form-elem">
              <input class="contacts__input" type="text" name="name" id="contacts__input-name" placeholder="Имя*">
              <label for="contacts__input-name"></label>
            </div>
            <div class="contacts__form-elem">
              <input class="contacts__input" type="tel" name="phone" id="contacts__input-phone" placeholder="Телефон*">
              <label for="contacts__input-phone"></label>
            </div>
            <button class="contacts__form-btn">Кнопка</button>
          </form>
        </div>
        <div class="contacts__map" id="map"></div>
      </div>
    </div>
  </section>
  <script src="https://api-maps.yandex.ru/2.1/?apikey=ваш API-ключ&lang=ru_RU"></script>

Answer 1

Понял так, что рамка сверху вам нужна только левой колонке с формой. Исходил из этого.
Рамку сверху сделал красным цветом для наглядности.
Опять же для наглядности, лишние стили не удалил, а только закомментировал.

Если запустить этот пример и открыть в полноэкранном режиме, можно убедиться, что рамка сверху у левой колонки с формой заканчивается строго перед картой и не наползает на неё. Это именно то, что вам нужно?

ymaps.ready(init);

function init() {
  var myMap = new ymaps.Map("map", {
    center: [55.76, 37.64],
    zoom: 7
  });
  myMap.controls.remove('searchControl')
  myMap.controls.remove('trafficControl')
  myMap.controls.remove('fullscreenControl')
  myMap.controls.remove('rulerControl')
  myMap.controls.remove('typeSelector')
}

* {
  box-sizing: border-box;
}

.container {
  margin: 0 auto;
  padding: 0 50px;
  //max-width: 1700px;
}

.contacts__container {
  display: flex;
}

.contacts__content {
  position: relative;
}

.contacts__left-column {
  padding: 124px 122px 124px 0;
  border-top: 1px solid red;
  width: 30%;
}

.contacts__left-column-heading {
  font-size: 24px;
  line-height: 32px;
}

.contacts__form {
  display: flex;
  flex-direction: column;
  //max-width: 700px;
}

.contacts__map {
  //position: absolute;
  //top: 0;
  //right: 0;
  //bottom: 0;
  //width: 70%;
  //max-width: 1239px;
  border-left: 1px solid #cacaca;
}

.contacts__address {
  margin-bottom: 27px;
  font-size: 16px;
  line-height: 32px;
  font-style: normal;
}

[class*="-ground-pane"] {
  filter: grayscale(1);
}

.contacts__form-elem {
  margin-bottom: 23px;
}

.contacts__input {
  padding: 0 24px;
  min-width: 400px;
  min-height: 40px;
  border: 1px solid #cacaca;
  border-radius: 100px;
}

.contacts__form-btn {
  margin-bottom: 38px;
  align-self: flex-start;
  color: #cacaca;
}

<section class="contacts">
    <div class="container">
      <h2 class="subheading contacts__subheading">Заголовок секции</h2>
    </div>
    <div class="contacts__content">
      <div class="container contacts__container">
        <div class="contacts__left-column">
          <h3 class="text-reset contacts__left-column-heading font-bold">Заголовок</h3>
          <address class="contacts__address">Подзаголовок</address>
          <h3 class="contacts__left-column-heading">Другой подзаголовок</h3>
          <form class="contacts__form">
            <div class="contacts__form-elem">
              <input class="contacts__input" type="text" name="name" id="contacts__input-name" placeholder="Имя*">
              <label for="contacts__input-name"></label>
            </div>
            <div class="contacts__form-elem">
              <input class="contacts__input" type="tel" name="phone" id="contacts__input-phone" placeholder="Телефон*">
              <label for="contacts__input-phone"></label>
            </div>
            <button class="contacts__form-btn">Кнопка</button>
          </form>
        </div>
        <div class="contacts__map" id="map"></div>
      </div>
    </div>
  </section>
  <script src="https://api-maps.yandex.ru/2.1/?apikey=ваш API-ключ&lang=ru_RU"></script>

БЛОГ НА HUSL

Верстка блоков выходящих за контейнер

Ответы (1 шт):