cssグリッド:子アイテムは完全な高さに拡張されません

2020-02-14 flexbox css-grid

私は、フルハイト(フレックス)親の内側にあるグリッドコンテナdiv( display: grid )を持っていdisplay: grid

.scss file

  .parent { /* this layout is full height */
    display: flex:
    flex-direction: column;

    .layout-grid {
       flex: 1;  /* this makes my grid to take all available height of parent */
       display: grid; 
       grid-template-columns: 20% 1fr;
       grid-template-rows: 1fr;
       grid-template-areas:
         "left main"
         "left main";
    }
    .left { /* this child is not full height*/
       grid-area: left;
    }
    .main { /* this child is not full height */
       grid-area: main;
    }
  }

.tsx file

<div className='parent'>
   <div className='layout-grid'>
      <div className='left'> Left </div>
      <div className='main'> Main </div>
   </div>
</div>

結果は次のとおりです。

ここに画像の説明を入力してください

外側の青い境界線は.layout-griddisplay: grid )で、適切な高さです。

しかし、グリッドが適切にフルハイトであっても、グリッドの子をフルハイトに拡張することはできません。 justify-items: stretchを試しましたjustify-items: stretch成功せずにjustify-items: stretchします。

しかし、 .layout-grid flex:1height: 100%なく特定の値(例: height: 90vh )ではなく、特定の定義された高さを指定すると、子コンテンツは最大の高さに拡張されます。

これはCSSグリッドが機能するはずの方法ですか? (言い換えると、子供が完全な高さを取るために、グリッドの親コンテナには特定の値が必要です(flex:1または%ではありません))?または私のスタイルのどこかに間違いがありますか?

Answers

Related