Warum funktioniert Überlauf versteckt nur, wenn Elemente in einer bestimmten Reihenfolge sind?

Question

Von this question besteht die Absicht darin, eine Auswahlbox und eine Schaltfläche in derselben Zeile zu haben, wobei die Breite der Auswahlbox den gesamten verfügbaren Platz ausfüllt.

Das mit dem folgenden HTML erreicht werden kann:

<form class="form-horizontal"> 
    <div class="form-group"> 
     <label class="col-xs-3 control-label" for="droplist">Select item:</label> 
     <div class="col-xs-9"> 
      <button class="btn btn-primary">Action!</button> 
      <div class="wrapper"> 
       <select id="droplist"> 
        <option>Value 1</option> 
        <option>Value 2</option> 
       </select> 
      </div> 
     </div> 
    </div> 
</form> 

und CSS:

.wrapper { 
    overflow: hidden; 
    margin-top: .5ex; 
} 
select { 
    width: 100%; 
} 
button { 
    float: right; 
} 

JsFiddle

Wird die Taste nach dem Wrapper div bewegt werden soll - mir die ist der strukturell intuitive Ort dafür - dann wird der Button auf die nächste Zeile geschoben.

Die Frage ist: Warum bewirkt die Umkehrung der Reihenfolge der Schaltfläche und Wrapper Div-Elemente, dass die Schaltfläche auf eine neue Zeile verschieben?

Answer 1

Da die Tastenbreite nicht eingestellt ist, müssen Sie die Flexbox automatisch auf den col-xs-9 Container anwenden, um die Breite automatisch zu füllen.

.col-xs-9 { 
 
    width: 75%; 
 
    display: flex; 
 
} 
 

 
.wrapper { 
 
    margin-top: .5ex; 
 
    flex: 1; 
 
} 
 

 
select { 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<form class="form-horizontal"> 
 
    <div class="form-group"> 
 
    <label class="col-xs-3 control-label" for="droplist">Select item:</label> 
 
    <div class="col-xs-9"> 
 
     <div class="wrapper"> 
 
     <select id="droplist"> 
 
      <option>Value 1</option> 
 
      <option>Value 2</option> 
 
     </select> 
 
     </div> 
 
     <button class="btn btn-primary">Action!</button> 
 
    </div> 
 
    </div> 
 
</form>

EDIT:

Was, warum Ihr Code nicht funktioniert, dann ist es, weil Sie alles schweben rechts, so dass die Taste zuerst nach rechts platziert, gefolgt von Ihnen wrapper die Hat keine Breite eingestellt. So overflow: hidden schafft es, das select Element in der gleichen Zeile zu halten. Wenn Sie das overflow entfernen, wird das Element select in die nächste Zeile verschoben.

Wenn Sie den Auftrag von wrapper und button umkehren wird die wrapper zuerst nach rechts gesetzt und als das childselect Element einer width von 100% hat, füllt sie den gesamten Platz, da Wrapper keine Breite festgelegt ist, die Überlauf ist sinnlos. Daraus ergibt sich die button Wraps in die nächste Zeile

Answer 2

EDIT

Es ist ein bisschen ein Rätsel, aber meine beste Vermutung wäre, dass, wie CSS Cascading, wenn die Taste vor, wäre es jetzt über die button's size wenn der 'float reflow' ausgeführt wird, so passt sich die div Breite entsprechend der Schaltfläche an. Aber wenn der Button hinterher ist, weiß CSS nicht, und die Breite benötigt den gesamten verfügbaren Platz.

Sie sollten immer eine Breite für gefloatete Elemente festlegen (außer wenn sie direkt auf ein Bild angewendet werden, das eine implizite Breite hat). Wenn keine Breite festgelegt ist, können die Ergebnisse unvorhersehbar sein.

könnte andere Problemumgehung display: table

.col-xs-9 { 
 
    display: table; 
 
} 
 

 
.wrapper { 
 
    overflow: hidden; 
 
    margin-top: .5ex; 
 
    width: 100%; 
 
} 
 
select { 
 
    width: 100%; 
 
} 
 

 
.wrapper, 
 
button { 
 
    display: table-cell; 
 
}

<form class="form-horizontal"> 
 
    <div class="form-group"> 
 
     <label class="col-xs-3 control-label" for="droplist">Select item:</label> 
 
     <div class="col-xs-9"> 
 
      
 
      <div class="wrapper"> 
 
       <select id="droplist"> 
 
       <option>Value 1</option> 
 
       <option>Value 2</option> 
 
       </select> 
 
      </div> 
 
      
 
      <button class="btn btn-primary">Action!</button> 
 
     </div> 
 
    </div> 
 
</form>