Google Chrome - Errore di overflow del fieldset

Question

Google Chrome sembra avere un bug quando si riempie il contenuto all'interno di un fieldset.

Ecco un jsfiddle che illustra il problema: http://jsfiddle.net/Dismissile/Lnm42/

Se si guarda alla pagina, vedrai che quando si dispone di un contenitore all'interno di un fieldset, e il contenitore ha overflow: auto insieme, e che il contenitore ha contenuti che traboccherà orizzontalmente, fieldset effettivamente espande invece di utilizzare una barra di scorrimento:

<fieldset class="parent"> 
    <div class="child"> 
     <div class="grandchild"> 
      asdf 
     </div> 
    </div> 
</fieldset> 

<div class="parent"> 
    <div class="child"> 
     <div class="grandchild"> 
      asdf 
     </div> 
    </div> 
</div> 

CSS:

.parent { 
    border: 1px solid green; 
    padding: 20px; 
    margin: 20px; 
} 

.child { 
    border: 1px solid red; 
    padding: 20px; 
    overflow: auto; 
} 

.grandchild { 
    border: 1px solid #ccc; 
    width: 2000px; 
    padding: 10px; 
} 

C'è una correzione/correzione CSS che posso utilizzare in modo che il contenuto esca correttamente quando si trova in un fieldset in Chrome?

Answer 1

Utilizzando JavaScript per impostare la larghezza della finestra:

• http://jsfiddle.net/Lnm42/2/

ho aggiunto una classe chiamata fieldset-width al fieldset:

<fieldset class="parent fieldset-width">

Poi ha aggiunto questo codice JQuery:

$(document).ready(function() { 
    $(".fieldset-width").css("width", $(window).width() - 82); 
}); 

$(window).resize(function() { 
    $(".fieldset-width").css("width", $(window).width() - 82); 
}); 

Il mio unico commento è che non riesco a pensare a un buon motivo per interferire con la funzionalità di default fieldset. Non mi piace "barre di scorrimento all'interno delle barre di scorrimento" per cominciare. Per i campi di input, che solitamente i fieldets circondano, sarei particolarmente cauto nel far scorrere l'utente per raggiungere tutti i campi di input.

Answer 2

Utilizzo di uno pseudo fieldset (ovvero <div class="fieldset"></div>) Credo che tu possa avvicinarti. Vedi jsfiddle.

Prova questo stile:

fieldset,.fieldset { 
    margin: 10px; 
    border: solid 1px black; 
    position: relative; 
    padding: .5em; 
} 

.legend { 
    left: 0.5em; 
    top: -0.6em; 
    color: black; 
    position: absolute; 
    background-color: white; 
    padding: 0 0.25em 0 0.25em; 
} 

E 'proprio l'ideale come fieldset stile ha bisogno di essere duplicato, ma per me è stato l'unica soluzione accettabile al mio scontro con questo problema che ho potuto venire con. Come sopra, potresti essere in grado di applicare lo stile del fieldset esistente allo pseudo.

Answer 3

UPDATE:

A partire da una recente Chrome per aggiornamento MS Windows (V28 forse non hanno ancora rintracciato giù?), auto non è più un valore valido per min-width, e questa soluzione non funziona più !

Nuova soluzione:

Utilizzando inherit invece di auto sembra risolvere il problema per tutti i casi che ho provato finora. (Compreso il violino originale .. per dettagli vedi the new fiddle fix.)

La correzione aggiornata: FIELDSET {min-width: inherit; }

risposta originale:

Chrome definisce per fieldset lo stile user agent di default: min-width: -webkit-min-content.

Così quando la tua area visibile (ovvero "schermo") è più piccola del tuo div con larghezza specifica, lo -webkit-min-content aumenta il fieldset per adattarsi alle dimensioni del contenuto (più padding, ecc.).

La correzione: FIELDSET { min-width: auto; }

ho fissato il vostro violino, try it out!

Answer 4

È possibile aggiungere style = "display: table-column;" al fieldset come soluzione alternativa.

Answer 5

Prova:

fieldset { 
    display: table-cell; 
    min-width: 0; 
    box-sizing: border-box; 
} 

Questo è il tuo esempio con fix: http://jsfiddle.net/2u3a9goc/