子どものフレックスボックス親のフィットテキストコンテンツ

Question

フレックスボックスを使用して、テキストコンテンツが長くなるにつれてスクロールできる列を作成したいと考えています。 私はより良い説明をするために基調講演で絵を描きました。ここで

when texts are small

when texts get big

私のコードでは、単にすべての要素がflexboxesであり、私の現在のコードです。 私はあなたが2件の観光名所する必要が

.app { 
 
     display: flex; 
 
     height: 100vh; 
 
     flex-direction: row; 
 
} 
 
.sidebar { 
 
     display:flex; 
 
     flex: 1; 
 
} 
 
.cv { 
 
\t display: flex; 
 
     flex:5; 
 
\t flex-direction: column; 
 
\t margin:20px; 
 
\t border: 1px solid lightgrey; 
 
\t border-radius: 10px; 
 
\t background-color: white; 
 
\t overflow: scroll; 
 
} 
 
.header { 
 
\t display: flex; 
 
\t flex: 0 0 150px; 
 
\t justify-content: center; 
 
\t align-items: center; 
 
\t font-size: 20px; 
 
} 
 
.section { 
 
\t display: flex; 
 
\t flex-direction: column; 
 
\t border: 1px solid lightgrey; 
 
\t margin: 10px; 
 
\t border-radius: 10px; 
 
} 
 
.sectionHeader{ 
 
\t display: flex; 
 
\t align-items: center; 
 
\t font-size: 18px; 
 
\t padding-left: 20px; 
 
\t padding-top: 15px; 
 
\t padding-bottom: 5px; 
 
\t flex: 0 0 30px; 
 
\t background-color: gray; 
 
\t color:white; 
 
\t font-weight: 700; 
 
} 
 
.sectionBody{ 
 
\t display: flex; 
 
\t flex: 1; 
 
\t padding: 20px; 
 
}

<div class="app"> 
 
    <div class="sidebar"></div> 
 
    <div class="cv"> 
 
\t <div class="header">Header</div> 
 
\t <div class="section"> 
 
\t \t <div class="sectionHeader">Section Header</div> 
 
\t \t <div class="sectionBody">LONG TEXT</div> 
 
\t </div> 
 
\t <div class="section"> 
 
\t \t <div class="sectionHeader">Section Header</div> 
 
\t \t <div class="sectionBody">LONG TEXT</div> 
 
\t </div> 
 
    </div> 
 
</div>

Answer 1

.sidebarに.appを含めるように私のスクリプトを編集した：

• をcvにmin-height: 0;（IA Firefox用の修正）を与えます

  .sectionにflex-shrink: 0を追加すると、適合しないと崩壊しません

スタックは、あなたが.cvまでの高さが、オーバーフローを使用して定義していない

body { 
 
    margin: 0; 
 
} 
 

 
.app { 
 
    display: flex; 
 
    height: 100vh; 
 
} 
 

 
.sidebar { 
 
    display: flex; 
 
    flex: 1; 
 
    background: red; 
 
} 
 

 
.cv { 
 
    display: flex; 
 
    flex: 5; 
 
    flex-direction: column; 
 
    margin: 20px; 
 
    border: 1px solid lightgrey; 
 
    border-radius: 10px; 
 
    background-color: white; 
 
    overflow: scroll; 
 
    min-height: 0;     /* added */ 
 
} 
 

 
.header { 
 
    display: flex; 
 
    flex: 0 0 150px; 
 
    justify-content: center; 
 
    align-items: center; 
 
    font-size: 20px; 
 
} 
 

 
.section { 
 
    display: flex; 
 
    flex-direction: column; 
 
    border: 1px solid lightgrey; 
 
    margin: 10px; 
 
    border-radius: 10px; 
 
    flex-shrink: 0;     /* added */ 
 
} 
 

 
.sectionHeader { 
 
    display: flex; 
 
    align-items: center; 
 
    font-size: 18px; 
 
    padding-left: 20px; 
 
    padding-top: 15px; 
 
    padding-bottom: 5px; 
 
    flex: 0 0 30px; 
 
    background-color: gray; 
 
    color: white; 
 
    font-weight: 700; 
 
} 
 

 
.sectionBody { 
 
    display: flex; 
 
    flex: 1; 
 
    padding: 20px; 
 
}

<div class="app"> 
 
    <div class="sidebar">sidebar</div> 
 
    <div class="cv"> 
 
    <div class="header">Header</div> 
 
    <div class="section"> 
 
     <div class="sectionHeader">Section Header</div> 
 
     <div class="sectionBody">LONG TEXT</div> 
 
    </div> 
 
    <div class="section"> 
 
     <div class="sectionHeader">Section Header</div> 
 
     <div class="sectionBody">LONG TEXT</div> 
 
    </div> 
 
    </div> 
 
</div>