Как получить абсолютно позиционированный элемент внутри относительно позиционированного контейнера из гибкой коробки, чтобы расти?

Question

Вот jsfiddle: https://jsfiddle.net/wwucLo3c/ Мне нужен красный div, чтобы быть полной шириной, когда нет голубого div. И если они есть, то они должны быть 50%.

Вот CSS контейнера:

.container{ 
    position:relative; 
    width:100%; 
    height:100%; 
    background:blue; 

    display:flex; 
    flex-direction:row; 
    align-content:stretch; 
} 

И деталь:

.item{ 
    position:absolute; 
    top:10%; 
    flex:1 1 1; 
    min-width:50%; 
    height:10%; 
} 

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

Answer 1

Возможно ли это?

Нет, Вы не можете установить гибкие свойства макета (кроме того), чтобы изогнуть детей с position: absolute

Absolutely-Positioned Flex Children

Абсолютно расположенный ребенка из гибкого контейнера не участвовать в прогибается раскладка. Тем не менее, он участвует в этапе переупорядочения (см. Порядок), что оказывает влияние на их окраску .

---

Решение:

1. Удалить position: absolute и изменить положение с помощью margin-top.
2. flex: 1 1 1 является неправильным. Последнее значение flex-basis не принимает единицу меньше значения (кроме 0 и авто)

Updated JSfiddle

body { 
 
    width: 300px; 
 
    height: 600px; 
 
    margin: 0; 
 
} 
 
html { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.container { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: blue; 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-content: stretch; 
 
} 
 
.item { 
 
    flex: 1 1 0; 
 
    height: 10%; 
 
    margin-top: 10%; 
 
    min-width: 50%; 
 
}

<h2>Multiple items</h2> 
 
<div class="container"> 
 
    <div class="item" style="background:tomato"></div> 
 
    <div class="item" style="background:cyan"></div> 
 
</div> 
 
<h2>Single item</h2> 
 
<div class="container"> 
 
    <div class="item" style="background:tomato"></div> 
 
</div>

Answer 2

Прежде всего, вы должны использовать правильный синтаксис для flex стиль.

.item { 
    flex: 1 1 auto; 
} 

Это проще сделать это с помощью position: relative по пунктам вместо Смотрите эту jsFiddle

Если необходимо использовать позицию абсолютного, то вам нужно будет обернуть детали в обертке и позиции, что абсолютно вместо. См. Это jsFiddle