固定列幅が1つのFlexbox

Question

flexboxは、2つの列で固定します。左側は固定幅で、右側はページサイズが変更されると縮尺されます。たとえば、：

<style> 
    .flex_container { 
     display: flex; 
     width: 100%; 
    } 

    .flex_col_left { 
     width: 200px; 
    } 
    .flex_col_right { 
     width: 85%; 
    } 
</style> 

<div class = "flex_container"> 
    <div class = "flex_col_left"> 
     ..... 
    </div> 
    <div class = "flex_col_right"> 
     ..... 
    </div> 
<div> 

これはある程度機能しますが、pxと％を混在させているように感じることはありません。このようにするのは間違っていますか？もしそうなら、もっと良い解決策がありますか？

EDITクラスの名前付けの問題は、タイプミスで修正されました。

Answer 1

右の列の幅を%に設定する代わりに、flex: 1を使用すると、残りの幅が残りの行に残ります。

.flex_container { 
 
    display: flex; 
 
    width: 100%; 
 
} 
 
.flex_item_left { 
 
    width: 200px; 
 
    background: lightgreen; 
 
} 
 
.flex_item_right { 
 
    flex: 1; 
 
    background: lightblue; 
 
}

<div class="flex_container"> 
 
    <div class="flex_item_left"> 
 
    ..... 
 
    </div> 
 
    <div class="flex_item_right"> 
 
    ..... 
 
    </div> 
 
    <div>

Answer 2

あなたはそれを成長させるために、非固定幅の要素にflex-grow: 1を使用することができます（なし幅の設定）。

.flex_container { 
 
    display: flex; 
 
    width: 100%; 
 
} 
 
.flex_item_left { 
 
    width: 200px; 
 
    background: #fa0; 
 
} 
 
.flex_item_right { 
 
    background: #0fa; 
 
    flex-grow: 1; 
 
}

<div class="flex_container"> 
 
    <div class="flex_item_left"> 
 
    ..... 
 
    </div> 
 
    <div class="flex_item_right"> 
 
    ..... 
 
    </div> 
 
    <div>