Flexbox z jedną stałą szerokością kolumny

Question

Próbuję uzyskać flexbox z dwiema kolumnami, lewą o stałej szerokości i prawą, która zmienia się wraz ze zmianą rozmiaru strony. Na przykład:

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

Działa to w pewnym zakresie, ale nie jest to właściwe, ponieważ łączę px i%. Czy to niewłaściwe zrobić to w ten sposób, a jeśli tak, jakie może być lepsze rozwiązanie?

EDYCJA Problem z nazewnictwem klas był literówką i został naprawiony.

Answer 1

Zamiast ustawiać szerokość w % na prawej kolumnie, można po prostu użyć flex: 1 i zajmie resztę wolnej szerokości z rzędu.

.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

Można użyć flex-grow: 1 na elemencie bez stałej szerokości, aby umożliwić mu wzrastać (i żadne ustawienie szerokości).

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