css3 „neuer“ Stil Flexbox nicht in Chrom

ich TextArea- strecken Mühe habe das css3 flexible Orgfeldlayout Modell immer in Chrom spätestens Beispiel zu arbeiten:css3 „neuer“ Stil Flexbox nicht in Chrom

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <style type="text/css"> 
     body { 
      background: #FFF; 
     } 

     div.content { 
      position: fixed; 
      width: 50%; 
      height: 80%; 
      top: 10%; 
      left: 25%; 
      padding: 10px; 
      background-color: #FFFFFF; 
      box-shadow: 0px 0px 25px 5px #333333; 
      border-radius: 10px; 

      display: -webkit-flex; 
      -webkit-flex-flow: column; 
      -webkit-align-items: stretch; 
     } 

     div.content > * { 
      -webkit-flex: 1 1 auto; 
      padding: 10px; 
      margin: 10px; 
      background-color: #FFFFFF; 
      border: 2px solid gray; 
      height:0; 
     } 
     </style> 
    </head> 
    <body> 
    <div class="content"> 
     <div> 
      <label>label content</label> 
     </div> 

     <textarea>Text area test</textarea> 

     <div></div> 

     <input type="text" value="input field" /> 
    </div> 
    </body> 
</html>

(jsfiddle dieser)

Im obigen Beispiel biegen sich alle Elemente korrekt in der Hauptachse, divs und Span strecken sich auch korrekt in der Querachse, aber Eingabe- und Textbereiche dehnen sich in der Querachse nicht korrekt aus. Laut der specification sollten sie.

ich suche nicht für eine Arbeit um, sondern wollen wissen, ob es etwas, was ich falsch mache oder etwas, was ich in der spec bin fehlt, die diese von der Arbeit verhindern würde.

Quelle

2012-11-05 CamM

Für einen Textbereich sind "Zeilen" und "Spalten" beide obligatorische Attribute. Ich fragte mich, ob das Layout nicht funktionierte, weil der HTML-Code (technisch) ungültig war, aber das Hinzufügen von HTML scheint nicht funktioniert zu haben (siehe: http://jsfiddle.net/nKzhk/20/). – gerrod

Es scheint die neueste Kanarische (25.0.1317.0 Mac) hat das gewünschte Verhalten. Ich vermute, das ist etwas, das seit dem stabilen Release behoben wurde. – ebidel

@ebidel - sieht so aus als wäre es korrekt, und es ist tatsächlich ein Browser-Implementierungsfehler, den ich mit Canary auf meinem Rechner bestätigt habe (und mit der Veröffentlichung heute ist es wieder anders, aber immer noch falsch). Fügen Sie Ihren Kommentar als Antwort hinzu und ich werde ihn für Sie markieren. – CamM

Wie @ebidel wies darauf hin, wandte sich dieser einen Browser Implementierung Fehler erwiesen und ist nicht mehr ein Problem in den letzten Releases.

Quelle

2015-04-14 23:56:52 CamM

Textbereiche und Eingang-Tags nicht automatisch die max-width Eigenschaft für Flexbox erben, da sie nicht Teil des Box-Modells sind. Damit sie als Div fungieren können, müssen Sie sie in ein div einpacken und ihnen 100% Breite geben. Dies funktioniert in der aktuellen Version von Chrome und Canary.

http://jsfiddle.net/nKzhk/29/

textarea { 
     width: 100%; 
    } 

<div class="content"> 
    <div> 
     <label>label content</label> 
    </div> 

    <div><textarea>Text area test</textarea></div> 

    <div></div> 

    <div><input type="text" value="input field" /></div> 
</div>

Quelle

2012-11-22 16:49:34 2ne

css3 „neuer“ Stil Flexbox nicht in Chrom

Antwort

Verwandte Themen