Due div al 50% con spazi bianchi: elementi nowrap all'interno di un contenitore flessibile

Question

Desidero avere un div genitore che detenga due div alfine del 50% di larghezza che ridimensionano con il contenuto.

Uno di questi ha uno h3 con white-space:nowrap; e questo fa aumentare il div oltre il 50%.

Posso forzare il div a tornare al 50% della larghezza utilizzando min-width:0; ma lo h3 ora è in overflow.

Quindi ho una larghezza diversa sui div dei bambini o un overflow dall'h3 all'interno di uno di essi.

È possibile farli avere lo stesso 50% di larghezza anche con elementi che hanno white-space:nowrap; all'interno?

Partenza il problema qui: http://codepen.io/anon/pen/VjPwLm?editors=1100

#parent { 
 
    background: whitesmoke; 
 
    display: inline-flex; 
 
} 
 
#left { 
 
    background: rgba(10, 200, 250, 0.5); 
 
    flex-basis: 0; 
 
    flex-grow: 1; 
 
} 
 
#right { 
 
    background: rgba(250, 200, 10, 0.5); 
 
    flex-basis: 0; 
 
    flex-grow: 1; 
 
    /*min-width:0;*/ 
 
    /* Turn this on to see the h3 overflow */ 
 
} 
 
h3 { 
 
    white-space: nowrap; 
 
}

<div id="parent"> 
 
    <div id="left">Captain Deadpool</div> 
 
    <div id="right"> 
 
    <h3>Very long title that does not entirelly fit into the div</h3> 
 
    </div> 
 
</div>

Answer 1

Se ho capito bene, si vuole l'elemento flessibile sinistra per essere largo quanto il titolo lungo.

Quindi, è possibile:

• Usa min-width: 100% su entrambi i prodotti Flex per renderli largo come la concatenazione dei loro testi. Quindi, saranno ugualmente larghi.

• Ma sono troppo larghi, poiché il testo del primo elemento flessibile è incluso. Utilizzare width: 0 per ignorarlo.

#parent { 
 
    background: whitesmoke; 
 
    display: inline-flex; 
 
} 
 
#left, #right { 
 
    min-width: 100%; 
 
} 
 
#left { 
 
    background: rgba(10,200,250,0.5); 
 
    width: 0; 
 
} 
 
#right { 
 
    background: rgba(250,200,10,0.5); 
 
    white-space: nowrap; 
 
}

<div id="parent"> 
 
    <div id="left">Captain Deadpool</div> 
 
    <div id="right"><h3>Very long title that does not entirelly fit into the div</h3></div> 
 
</div>

Answer 2

Se ho capito adeguatamente la questione, si vuole maintian i 2 div in modo che abbiano una larghezza del 50%. Impostare il div genitore per avere una larghezza del 100% e quindi impostare il n. E il n. A larghezza minima: 50%; Aggiungi alla h3 in modo che l'overflow sia nascosto.

#parent { 
 
    background: whitesmoke; 
 
    display: inline-flex; 
 
} 
 
#left { 
 
    background: rgba(10, 200, 250, 0.5); 
 
    flex-basis: 0; 
 
    flex-grow: 1; 
 
    min-width: 100%; 
 
} 
 
#right { 
 
    background: rgba(250, 200, 10, 0.5); 
 
    flex-basis: 0; 
 
    flex-grow: 1; 
 
    min-width: 100%; 
 
} 
 
h3 { 
 
    white-space: nowrap; 
 
}

<div id="parent"> 
 
    <div id="left">Captain Deadpool</div> 
 
    <div id="right"> 
 
    <h3>Very long title that does not entirelly fit into the div</h3> 
 
    </div> 
 
</div>