Flex - drei Spalten, die 3d geht über den Bildschirm hinaus

Question

Wenn Sie diesen Code ausführen, geht die rechte Spalte weit über den Bildschirm hinaus, nach rechts.

1. Ich möchte, dass die Seitenstützen, die auf sein, während die mittlere mit einer festen Breite sein.

2. Und wie man es in IE10 arbeiten lassen?

Layout:

<div class="wrapper"> 
    <div class="left"></div> 
    <div class="middle"> 
     <div> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget ante bibendum, cursus diam sit amet 
     </div> 
    </div> 
    <div class="right"></div> 
</div> 

CSS:

.wrapper { 
    height: 80px; 
    width: 100%; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-direction: row; 
    flex-direction: row; 
    -webkit-align-items: center; 
    align-items: center; 
    -webkit-justify-content: center; 
    justify-content: center; 
} 
.wrapper .left { 
    height: 100%; 
    flex: 0 0 100%; 
    background-color: yellow; 
} 
.wrapper .middle { 
    height: 100%; 
    flex: 0 0 800px; 
    background-color: orange; 
} 
.wrapper .right { 
    height: 100%; 
    flex: 0 0 100%; 
    background-color: red; 
} 

Answer 1

Sie sind nicht die flex Stenografie richtig verwendet wird. Dies ist das korrekte Format: flex: <flex-grow> <flex-shrink>? || <flex-basis> ;

Ive geändert, um mit Ihren Spezifikationen einschließlich IE zu arbeiten. Wegen der festen 800ox-Breite müssen Sie dies im Vollbildmodus anzeigen.

.wrapper { 
 
    height: 80px; 
 
    width: 100%; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-orient: horizontal; 
 
    -webkit-box-direction: normal; 
 
    -ms-flex-direction: row; 
 
    flex-direction: row; 
 
    -webkit-box-align: center; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
    -webkit-box-pack: center; 
 
    -ms-flex-pack: center; 
 
    justify-content: center; 
 
} 
 
.wrapper .left { 
 
    height: 100%; 
 
    -webkit-box-flex: 1; 
 
    -ms-flex: 1 1 0%; 
 
    flex: 1 1 0%; 
 
    background-color: yellow; 
 
} 
 
.wrapper .middle { 
 
    height: 100%; 
 
    width: 800px; 
 
    background-color: orange; 
 
} 
 
.wrapper .right { 
 
    height: 100%; 
 
    -webkit-box-flex: 1; 
 
    -ms-flex: 1 1 0%; 
 
    flex: 1 1 0%; 
 
    background-color: red; 
 
}

<div class="wrapper"> 
 
    <div class="left"></div> 
 
    <div class="middle"> 
 
    <div> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget ante bibendum, cursus diam sit amet 
 
    </div> 
 
    </div> 
 
    <div class="right"></div> 
 
</div>

Answer 2

könnten Sie flex verwenden: 1; auf eigene Faust für Ihre linken und rechten Spalten. Sie müssen die Flex-Shrink- und Flex-Basis-Werte nicht wirklich angeben, da diese abhängig von der Flex-Grow-Eigenschaft sinnvoll festgelegt werden.