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

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;
}

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