Flexbox вертикально разделить контейнер в ПОЛОВИНЕ

Question

Может кто-нибудь сказать, как я могу сделать правый верхние контейнер и правого нижнего контейнера имеет одинаковую высоту и разделить красный контейнер 50-50% по вертикали. Независимо от того, что внутри. Я пробовал растягивать содержимое и обертывать их, сохраняя flex-direction: row, чтобы поддерживать ту же высоту для предметов, но я потерялся.

Что я ожидаю: правого верхнего контейнера растет такие же высоты, как правого нижнего что также приводит к оставил контейнер растет автоматически, конечно.

Это то, что я до сих пор: http://jsbin.com/rozoxoneki/edit?html,css,output

.flex{ 
    display: flex; 
    border: 5px solid red; 
    &-child{ 
    background: green; 
    border: 2px solid yellow; 
    flex: 1; 
    } 
} 

.flex--vertical{ 
    flex-direction: row; 
    flex-wrap: wrap; 

    > .flex-child{ 
    min-width: 100%; 
    } 
} 


<div class="flex"> 
    <div class="flex-child"> 
    left 
    </div> 
    <div class="flex-child flex flex--vertical"> 
    <div class="flex-child"> 
     <h1>right top</h1> 
    </div> 
    <div class="flex-child"> 
     <h1>right bottom</h1> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium autem esse iste voluptate eum ex mollitia temporibus unde eveniet omnis, vel, corrupti sed nobis consequatur quaerat ad sequi aliquid nostrum?</p> 
    </div> 
    </div> 
</div> 

Answer 1

Наглядно можно было бы ожидать, что это будет работать только с flex-direction: column для основного контейнера и высоты левого контейнера, установленного на 100%.

Вместо весь браузер сделать это: (это цитата из другого stackoverflow question)

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

Так что вы можете сделать, это обернуть два правильных контейнеров в новый:

Как этот HTML - схеме:

<div class="main-container"> 
    <div class="left-container">Left container</div> 
    <div class="right-container"> 
     <div class="half-containers">Top right</div> 
     <div class="half-containers">Bottom right</div> 
    </div> 
</div> 

Вот jsfiddle как пример того, как вы могли бы стиль это для ожидаемого результата.

В этом примере «основной контейнер» установлен на 50% ширину и 75% высоты тела.

Answer 2

Принятый ответ не является идеальным для использования гибких свойств, потому что все это может быть сделано без необходимости min-height или max-height

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

Для того чтобы получить разнесенные верхние/нижние divs с равномерным интервалом, вам нужно либо указать правильное значение для flex-basis, либо позволить гибкой работе самостоятельно. Если предположить, что дисплей родителя устанавливается изгибаться с ориентацией колонны, объединенный flex стиль может получить нас там легко:

.half-containers { 
    flex: 1; 
} 

видеть больше на flex styling и в flex-basis недвижимость

Answer 3

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

(Что у меня было то, что каждый родительский элемент должен иметь height: 100% набор, или все дело ломается.)

HTML

<div id="container"> 
    <div class="row">This is the top.</div> 
    <div class="row">This is the bottom.</div> 
</div> 

CSS

html, body { 
    height: 100%; 
} 

#container { 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
} 

.row { 
    flex: 1; 
} 

/* optional: get rid of body margin. makes look nice. */ 
body { 
    margin: 0; 
} 

/* optional: shade the bottom row */ 
.row:nth-child(2) { 
    background: #bbb 
} 

Рабочий кодPen здесь:

https://codepen.io/rbrtmrtn/pen/NyxeJE