Flex - три столбца, третий один выходит за экран

Question

При запуске этого кода правый столбец выходит далеко за пределы экрана, вправо.

1. Я хочу, чтобы боковые столбцы были отзывчивыми, а средний - с фиксированной шириной.

2. И как заставить его работать в IE10?

Планировка:

<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

Вы не используете flex стенографии правильно. Это правильный формат: flex: <flex-grow> <flex-shrink>? || <flex-basis> ;

Ive поменял вашу, чтобы работать с вашими спецификациями, включая IE. Из-за фиксированной ширины 800X вам необходимо просмотреть это в полноэкранном режиме.

.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

Вы можете использовать гибкий: 1; на его собственные для ваших левых и правых столбцов. Вам не нужно указывать значения flex-shrink и flex-basis, поскольку они будут настроены разумно в зависимости от свойства flex-grow.