Fai div riempi lo * spazio * orizzontale * in flexbox

Ho 2 div side-by-side in una flexbox. La mano destra dovrebbe avere sempre la stessa larghezza e io voglio la mano sinistra per afferrare lo spazio rimanente. Ma non lo farà a meno che non imposti specificamente la sua larghezza.

Quindi, al momento, è impostato al 96% che sembra OK finché non schiacci davvero lo schermo, quindi il div della mano destra diventa un po ‘affamato dello spazio di cui ha bisogno.

Credo che potrei lasciarlo così com’è, ma è sbagliato – come deve esserci un modo per dire:

quello giusto è sempre lo stesso; tu a sinistra – ottieni tutto ciò che è rimasto

.ar-course-nav { cursor: pointer; padding: 8px 12px 8px 12px; border-radius: 8px; } .ar-course-nav:hover { background-color: rgba(0, 0, 0, 0.1); } 
 

Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!
A really really really really really really really really really really really long department name
Created: 21 September 2016
>

Usa la proprietà flex-grow per fare in modo che un object flessibile consumi spazio libero sull’asse principale .

Questa proprietà espanderà il più ansible l’elemento, regolando la lunghezza in ambienti dinamici, come ridimensionamento dello schermo o aggiunta / rimozione di altri elementi.

Un esempio comune è flex-grow: 1 o, usando la proprietà shorthand, flex: 1 .

Quindi, invece di width: 96% sul tuo div, usa flex: 1 .


Hai scritto:

Quindi, al momento, è impostato al 96% che sembra OK finché non schiacci davvero lo schermo, quindi il div della mano destra diventa un po ‘affamato dello spazio di cui ha bisogno.

Lo schiacciamento del div a larghezza fissa è correlato a un’altra proprietà flex-shrink : flex-shrink

Per impostazione predefinita, gli elementi flessibili sono impostati su flex-shrink: 1 che consente loro di ridursi al fine di prevenire l’overflow del contenitore.

Per disabilitare questa funzione usa flex-shrink: 0 .

Per maggiori dettagli vedi la sezione Fattore di flex-shrink nella risposta qui:

  • Quali sono le differenze tra base flessibile e larghezza?

Scopri di più sull’allineamento della flessione lungo l’ asse principale qui:

  • In CSS Flexbox, perché non ci sono proprietà “justify-items” e “justify-self”?

Scopri di più sull’allineamento della flessione lungo l’ asse trasversale qui:

  • In che modo il flex-wrap funziona con align-self, align-items e align-content?