Flexbox mit einer festen Spaltenbreite

Question

Ich versuche eine flexbox mit zwei Spalten zu erreichen, die linke, die eine feste Breite hat und die rechte, die skaliert, wenn die Seitengröße geändert wird. Beispiel:

<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> 

Dies funktioniert in gewissem Umfang, aber es fühlt sich nicht richtig an, da ich px und% mische. Ist es falsch, dies zu tun, und wenn ja, was könnte eine bessere Lösung sein?

EDIT Klassen Benennung Problem war ein Tippfehler und jetzt behoben.

Answer 1

Anstelle der Breite in % auf der rechten Spalte können Sie einfach flex: 1 verwenden und es wird Rest der freien Breite in einer Reihe dauern.

.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

Sie flex-grow: 1 auf die nicht mit fester Breite Elemente verwenden können es wachsen zu lassen (und Einstellung keine Breite).

.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>