HTML/CSS hack per consentire l'overflow-x: auto & overflow-y: visibile?

Question

Ho un div 400px x 400px che voglio scorrere verticalmente. Quindi sto impostando overflow-y: auto. Ma occasionalmente, voglio che il contenuto all'interno del div sia overflow-x: visible.

Questo non funziona. Penso che sia perché non puoi impostare diversi valori di overflow se uno di essi è visibile.

Vero?

In caso contrario, c'è una correzione css/js decente per questo? Ho notato che l'app di flusso aggiunge un corpo calcolato e in posizione assoluta al corpo ogni volta che si verifica una situazione come questa: http://cl.ly/32392W0U2t1y2Q103X2d. È questa la soluzione migliore? E ci sono plugin/tutorial da guardare?

Answer 1

Prova ad aggiungere white-space: nowrap;

Answer 2

Non è possibile impostare diversi valori di overflow se uno di loro è visibile; la bozza del modello box CSS3 lo dice nella sezione overflow: "I valori calcolati di 'overflow-x' e 'overflow-y' sono uguali ai loro valori specificati, tranne che alcune combinazioni con 'visible' non sono possibili: se uno è specificato come 'visibile' e l'altro è 'scorrimento' o 'auto', quindi 'visibile' è impostato su 'auto'. "

Per quanto riguarda i workaround, è necessario prima decidere quale sia il comportamento desiderato. Quando hai una barra di scorrimento sulla destra, come funziona overflow-x: visible? Il contenuto in eccesso dovrebbe continuare in qualche modo sulla destra della barra di scorrimento? Questo sarebbe difficile da organizzare. O la barra di scorrimento dovrebbe spostarsi a destra?