ネストされたフレックスコンテナの子に基づいてフレックスコンテナが拡張されない理由

Question

ネストされたフレックスボックスアイテムが複数ある場合、その子要素の実際の高さを尊重するために親要素を取得できません。ここで私が何を意味するかです：

問題：理想の

：

これらの細胞中のコンテンツがある、それは最小の高さになるまで、コンテンツを持っていない行をスキッシュ必要があります親要素に到達しました。その後は、最小の高さを超えて成長する必要があります

細胞にはほとんどコンテンツがある場合、行は最小の高さまでスペースアップのさえ量を取る必要があります（これはすでに働いています） ：

私のマークアップ：

.weeks { 
 
    display: flex; 
 
    flex-direction: column; 
 
    background-color: lightcoral; 
 
    width: 400px; 
 
    min-height: 200px; 
 
} 
 

 
.week { 
 
    flex: 1 1 0; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.days { 
 
    flex: 1; 
 
    display: flex; 
 
    background-color: lightblue; 
 
} 
 

 
.day { 
 
    border: 1px solid black; 
 
    flex: 1; 
 
}

<div class="weeks"> 
 
    <div class="week"> 
 
    <div class="days"> 
 
     <div class="day">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum consequatur beatae animi porro cumque, tempora delectus voluptates repellat vitae. 
 
     </div> 
 
     <div class="day">1</div> 
 
     <div class="day">1</div> 
 
    </div> 
 
    </div> 
 
    <div class="week"> 
 
    <div class="days"> 
 
     <div class="day">1</div> 
 
     <div class="day">1</div> 
 
     <div class="day">1</div> 
 
    </div> 
 
    </div> 
 
    <div class="week"> 
 
    <div class="days"> 
 
     <div class="day">1</div> 
 
     <div class="day">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum consequatur beatae animi porro cumque, tempora delectus voluptates repellat vitae. 
 
     </div> 
 
     <div class="day">1</div> 
 
    </div> 
 
    </div> 
 
</div>

どのように私はこれをフレックスボックスを使用して解決できますか？

Answer 1

プロパティを0に設定しました。.weekです。設定しないままにすると、問題は解決します。 .week要素の高さを最小にする場合は、.weekセレクタでそのプロパティを設定します。

.weeks { 
 
    display: flex; 
 
    flex-direction: column; 
 
    background-color: lightcoral; 
 
    width: 400px; 
 
    min-height: 200px; 
 
} 
 

 
.week { 
 
    flex: 1 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.days { 
 
    flex: 1; 
 
    display: flex; 
 
    background-color: lightblue; 
 
} 
 

 
.day { 
 
    border: 1px solid black; 
 
    flex: 1; 
 
}

<div class="weeks"> 
 
    <div class="week"> 
 
    <div class="days"> 
 
     <div class="day">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum consequatur beatae animi porro cumque, tempora delectus voluptates repellat vitae. 
 
     </div> 
 
     <div class="day">1</div> 
 
     <div class="day">1</div> 
 
    </div> 
 
    </div> 
 
    <div class="week"> 
 
    <div class="days"> 
 
     <div class="day">1</div> 
 
     <div class="day">1</div> 
 
     <div class="day">1</div> 
 
    </div> 
 
    </div> 
 
    <div class="week"> 
 
    <div class="days"> 
 
     <div class="day">1</div> 
 
     <div class="day">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum consequatur beatae animi porro cumque, tempora delectus voluptates repellat vitae. 
 
     </div> 
 
     <div class="day">1</div> 
 
    </div> 
 
    </div> 
 
</div>