Crea pulsanti al 100% quando il testo lo spinge sotto l'immagine

Question

Questo è complicato e non so nemmeno se è possibile solo con i CSS.

Ho un'immagine, una parte di testo e due pulsanti. Quando il testo è piccolo e non cresce sotto l'immagine, voglio che i pulsanti siano i prossimi all'immagine. Ma quando il testo è così grande, deve continuare sotto l'immagine. Voglio che i pulsanti crescano fino al 100% della larghezza. Per farla breve, voglio che i pulsanti abbiano le stesse dimensioni del testo.

Questo è il risultato desiderato per il testo di piccole dimensioni.

Questo è il risultato desiderato quando il testo cresce

Questo è possibile solo a che fare con i CSS?

Ho creato una codepen per la configurazione corrente (solo testo di piccole dimensioni). http://bit.ly/1TwajIf

Answer 1

DEMO (provare a cambiare l'altezza della .img o l'ampiezza dell'uscita)

grande domanda! questo è effettivamente possibile utilizzando solo CSS.

ho fatto l'immagine float: left quindi utilizzare Box Flex per il contenitore dei pulsanti come

.fill{ 

    outline: 1px solid red; 
    display: flex; 
} 

.fill>*{ 

    flex-grow: 1; 

} 

controllo la demo di dettaglio completo