子どもの身長を一定に保ちます

Question

私は2つの子divの高さを一定に保ちたいと考えています。abcとdefはそれぞれ親の身長の半分であるxyzです。 CSSでflexを使用してこれを行うことができましたが、子div abcとdefのそれぞれに、行が動的に追加されたテーブルがあります。これにより、abcとdefの各ディビジョンが展開され、行に対応します。

あまりにも多くの行が追加されると、これらのそれぞれがスクロール可能になりたいと思います。

私は多くのソリューションを試しましたが、どれもうまくいかないようです。事前に

#xyz { 
 
    flex: 1 1 auto; 
 
    display: flex; 
 
    flex-flow: column; 
 
} 
 
#abc { 
 
    width: 100%; 
 
    flex: 1; 
 
} 
 
#def { 
 
    width: 100%; 
 
    flex: 1; 
 
}

<div id="xyz" class="row"> 
 
    <div id="abc" class="col-border-bottom container-fluid"> 
 
    <h2>ABC details</h2> 
 
    <table id="abc-table"></table> 
 
    </div> 
 
    <div id="def" class="container-fluid"> 
 
    <h2>DEF details</h2> 
 
    <table id="def-table"></table> 
 
    </div> 
 
</div>

ありがとう：

は、ここに私のコードです。

Answer 1

オーバフローを得るためにflexboxを使用している場合は、オーバフロー時にスクロールできるように、flexboxの子供のコンテンツをabsoluteに配置してください。だからここ

は、私はあなたのコードに変更した内容の要約です：

1. オーバーフローを実証するために、xyzコンテナのための特定の高さを設定します。この高さは要件に応じて変更できます。

2. フレックスボックスの子供にposition: relativeとoverflow-y: autoを追加しました。abcとdefです。

3. 絶対配置ボックスにabcとdefの内容をラップ：

   .flex-inner { 
       position: absolute; 
       height: 100%; 
       width: 100%; 
       top: 0; 
       left: 0; 
   } 
   

4. は、例示のためにボックスにいくつかの境界とテーブルを追加しました。

* { 
 
    box-sizing: border-box; 
 
} 
 
#xyz { 
 
    flex: 1 1 auto; 
 
    display: flex; 
 
    flex-flow: column; 
 
    height: 250px; 
 
    border: 1px solid; 
 
} 
 
#abc { 
 
    width: 100%; 
 
    flex: 1; 
 
    border: 1px solid; 
 
    position: relative; 
 
    overflow-y: auto; 
 
} 
 
#def { 
 
    width: 100%; 
 
    flex: 1; 
 
    border: 1px solid; 
 
    position: relative; 
 
    overflow-y: auto; 
 
} 
 
.flex-inner { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
table { 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 
table td { 
 
    border: 1px solid red; 
 
}

<div id="xyz" class="row"> 
 
    <div id="abc" class="col-border-bottom container-fluid"> 
 
    <div class="flex-inner"> 
 
     <h2>ABC details</h2> 
 
     <table id="abc-table"> 
 
     <tr> 
 
      <td colspan="2">Title</td> 
 
     </tr> 
 
     <tr> 
 
      <td>row</td> 
 
      <td>row</td> 
 
     </tr> 
 
     <tr> 
 
      <td>row</td> 
 
      <td>row</td> 
 
     </tr> 
 
     <tr> 
 
      <td>row</td> 
 
      <td>row</td> 
 
     </tr> 
 
     <tr> 
 
      <td>row</td> 
 
      <td>row</td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
    </div> 
 
    <div id="def" class="container-fluid"> 
 
    <div class="flex-inner"> 
 
     <h2>DEF details</h2> 
 
     <table id="def-table"> 
 
     <tr> 
 
      <td colspan="2">Title</td> 
 
     </tr> 
 
     <tr> 
 
      <td>row</td> 
 
      <td>row</td> 
 
     </tr> 
 
     <tr> 
 
      <td>row</td> 
 
      <td>row</td> 
 
     </tr> 
 
     <tr> 
 
      <td>row</td> 
 
      <td>row</td> 
 
     </tr> 
 
     <tr> 
 
      <td>row</td> 
 
      <td>row</td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

divsに 'overflow：scroll'と 'height：[something]'を与えます。