Контролировать высоту гибкого элемента внутри flex-сетки, не затрагивая окружающие элементы

Question

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

В моей скрипте ниже у меня есть класс .highlighted в пределах .flexbox-2, который я хотел бы изменить,По сути, row 1 второго столбца будет иметь более высокую высоту, чем первый и третий столбцы, но все границы все равно будут выровнены.Я думал применить position: absolute и изменить его CSS там, но это не оказалось плодотворным.Мне интересно, есть ли другие маршруты, по которым я могу пойти.

Проверьте этот jsfiddle

Код:

* {
  box-sizing: border-box;
}

body {
  font-family: helvetica, serif;
}

.container {
  display: -webkit-flex;
  -webkit-flex-direction: row;
}

.flex {
  display: flex;
  flex-direction: column;
}

.flex-row {
  flex: 1;
  border: 1px solid;
}

.flexbox-1 {
  -webkit-flex: 1;
  border: solid 3px red;
}

.flexbox-2 {
  -webkit-flex: 1;
  border: solid 3px green;
  height: 200px;
  margin-left: 10px;
  position: relative;
}

.highlighted {
  position: absolute;
  border: 1px solid yellow;
  padding-top: 20px;
}

.flexbox-3 {
  -webkit-flex: 1;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}

<div class="container">
  <div class="flex flexbox-1">
    <div class="flex-row">row 1</div>
    <div class="flex-row">row 2</div>
    <div class="flex-row">row 3</div>
  </div>

  <div class="flex flexbox-2">
    <div class="flex-row highlighted">row 1</div>
    <div class="flex-row">row 2</div>
    <div class="flex-row">row 3</div>
  </div>

  <div class="flex flexbox-3">
    <div class="flex-row">row 1</div>
    <div class="flex-row">row 2</div>
    <div class="flex-row">row 3</div>
  </div>
</div>

Answer 1

Если вы хотите, чтобы первая строка находилась над двумя другими столбцами, вы можете использовать отрицательный margin-top:

.highlighted {
  border: 1px solid yellow;
  margin-top: -10px;
  padding-bottom: 10px;
}

Рабочий пример