Вертикально выровнять div в div

Question

Я уже вытягиваю (что осталось) мои волосы на несколько дней. Я видел и пытался реализовать различные решения здесь, на SO & других гуглингов, к сожалению, безрезультатно.

Я пытаюсь вертикально центрировать div внутри другого div, который позиционируется с использованием flex. Дети этого div также должны быть сосредоточены.

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

Аналогичный вопрос - Я знаю, есть очень похожий вопрос к моей здесь: Vertical align fluid div within another fluid div. Я попытался реализовать в своем решении, но, похоже, это не имеет значения. https://jsfiddle.net/AndyMeFul/Luc53a6t/

HTML:

<div id="widget-container"> 
<div id="widget-one" class="widget widget-prio"> 
    <div class="widget-header">Big Widget</div> 
    <div class="widget-content-container"> 
     <div class="widget-textblock widget-textblock-prio">Vertically Center Me..</div> 
     <div class="widget-textblock">Also me..</div> 
    </div> 
</div> 
<div id="widget-two" class="widget"> 
    <div class="widget-header">Small Widget</div> 
    <div class="widget-content-container"> 
     <div class="widget-textblock">And I.</div> 
    </div> 
</div> 
<div id="widget-three" class="widget"> 
    <div class="widget-header">Empty Widget</div> 
</div> 

CSS:

body { 
    font-family: sans-serif; 
    background-color: lightseagreen; 
    margin 0; 
} 
#widget-container { 
    display: flex; 
    position: fixed; 
    top: 30px; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 
.widget { 
    margin: 15px; 
    background-color: white; 
    flex-grow: 1; 
    border: solid 1px black; 
} 
.widget-prio { 
    flex-grow: 3; 
} 
.widget-header { 
    padding: 10px 0; 
    width: 100%; 
    text-align: center; 
    background-color: skyblue; 
} 
.widget-content-container { 
    display: flex; 
    background-color: lightgrey; 
    padding: 5px; 
} 
.widget-textblock { 
    flex-grow: 1; 
    text-align: center; 
} 
.widget-textblock-prio { 
    flex-grow: 3; 
} 

JSFiddle:https://jsfiddle.net/AndyMeFul/bLmy3ngq

Answer 1

По общему признанию, я не эксперт по flex, но я думаю, что смог получить то, что вы хотели с этим. Ключ добавлял height: 100% (с некоторыми другими изменениями) в .widget-content-container, хотя я не уверен, почему хорошо размещенный align-items: stretch не работает.

body { 
 
    font-family: sans-serif; 
 
    background-color: lightseagreen; 
 
    margin 0; 
 
} 
 
#widget-container { 
 
    display: flex; 
 
    position: fixed; 
 
    top: 30px; 
 
    right: 0; 
 
    bottom: 15px; 
 
    left: 0; 
 
} 
 
.widget { 
 
    display: flex; 
 
    flex-direction: column; 
 
    margin: 15px 15px 0; 
 
    background-color: white; 
 
    border: solid 1px black; 
 
} 
 
.widget-prio { 
 
    flex-grow: 3; 
 
} 
 
.widget-header { 
 
    padding: 10px 0; 
 
    width: 100%; 
 
    text-align: center; 
 
    background-color: skyblue; 
 
} 
 
.widget-content-container { 
 
    display: flex; 
 
    background-color: lightgrey; 
 
    padding: 5px; 
 
    height: 100%; 
 
} 
 
.widget-textblock { 
 
    flex-grow: 1; 
 
    text-align: center; 
 
    align-self: center; 
 
} 
 
.widget-textblock-prio { 
 
    flex-grow: 3; 
 
}

<div id="widget-container"> 
 
    <div id="widget-one" class="widget widget-prio"> 
 
     <div class="widget-header">Big Widget</div> 
 
     <div class="widget-content-container"> 
 
      <div class="widget-textblock widget-textblock-prio">Horizontally Center Me..</div> 
 
      <div class="widget-textblock">Also me..</div> 
 
     </div> 
 
    </div> 
 
    <div id="widget-two" class="widget"> 
 
     <div class="widget-header">Small Widget</div> 
 
     <div class="widget-content-container"> 
 
      <div class="widget-textblock">And I.</div> 
 
     </div> 
 
    </div> 
 
    <div id="widget-three" class="widget"> 
 
     <div class="widget-header">Empty Widget</div> 
 
    </div> 
 
</div>