Растянуть блок в центре flex контейнера

Question

Необходимо растянуть центральный div элемент во flex контейнере, чтобы он занимал ширину равную x2 окружающих его блоков. Выглядеть должно так:

[div][div][div][div]
[div][""""""""][div]
[div][div][div][div]

HTML:

<div class="row">
    <div class="row-item">
        <figure>
            <img class="item-icon" src="img/cocktail-icon.svg" />
            <figcaption class="title">HOLIDAYS</figcaption>
        </figure>
        <p class="description">Lorem, ipsum dolor sit amet consectetur adipisicing elit, set diam euismod tincidut non.
        </p>
    </div>
    <div class="row-item-main">
        <!--<img class="item-icon" src="img/cocktail-icon.svg"/>-->
    </div>
    <div class="row-item">
        <figure>
            <img class="item-icon" src="img/cocktail-icon.svg" />
            <figcaption class="title">HOLIDAYS</figcaption>
        </figure>
        <p class="description">Lorem, ipsum dolor sit amet consectetur adipisicing elit, set diam euismod tincidut non.
        </p>
    </div>
</div>

CSS:

.main .row {
    display: flex;
}

.row-item {
    margin: 0;
    text-align: center;
    padding: 20px;
    border: 1px solid black;
}

.main .row-item-main {
    flex: 1;
    padding: 0;
    background-color: orange;
}

Answer 1

Думаю, далее легко доработать по потребности

Попробовать код можно по ссылке

<style>
  .root {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background: green;
  }
  .container {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: stretch;
  }
  .adjust {
    flex: 1;
  }
  .content {
    flex: 2;
    background: cyan;
    height: 50%;
  }
</style>

<div class="root">
  <div class="container">
    <div class="adjust">
    </div>
    <div class="content">
    </div>
    <div class="adjust">
    </div>
  </div>
</div>

P.S. Другой пример, который еще проще переделать

БЛОГ НА HUSL

Растянуть блок в центре flex контейнера

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