Leftnav сокращает ширину при установке в положение «фиксировано»

Question

У меня есть основная область содержимого и боковая панель, созданная с помощью комбинации Bootstrap и Flexbox.

Я не хочу, чтобы исправить Navbar с прокруткой страницы, но если я применяю position: fixed он больше не заполняет это пространство horizontal` ...

почему это, и как я могу это исправить?

The codepen is here.

UPDATE

Выбранный ответ делает работу на codepen, но в реальном месте он работает только тогда, когда то окно меньше, как IPAD-портретной размер:

при нормальной ширине рабочего стола, левав продолжает увеличиваться ...

Answer 1

Вы не можете сделать position: fixed; на элемент верхнего уровня, который также является частью макета display:flex;. Но если вы немного умны, вы можете использовать position:fixed; на ребенке.

Вам нужно будет прорезать сетку Bootstrap, хотя это - процентные значения и поля, которые не совместимы с flexbox. See my Codepen fork of your work.

HTML:

<div class="two-col-wrapper"> 
    <div class="leftnav"> 
     <div class="list-group list-group-fixed"> 
     <a class="list-group-item active" href="">Validate Address</a> 
     <a class="list-group-item" href="">Get Postal Codes</a> 
     <a class="list-group-item" href="">Get City/State/Province</a> 
     <a class="list-group-item" href="">Get Candidate Address</a> 
     <a class="list-group-item" href="">Auto Complete</a> 
     </div> 
    </div> 
    <div class="main-content"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nobis, accusamus delectus amet cupiditate expedita ex ducimus fugiat voluptatibus.</p> 

    </div> 
    </div> 

CSS:

.two-col-wrapper { 
    min-height: 100vh; 
    display: flex; 
    flex-direction: row; 

    .main-content { 
    background-color: #ccc; 
    padding: 90px 25px; 
    flex-grow: 1; 
    } 

    .leftnav { 
    background-color: #f1f1f1; 
    padding: 90px 10px; 
    flex: 2 0 200px; 

    .list-group-fixed { 
     position: fixed; 
    } 
    } 
} 

Но помните, что вы получили умный так есть недостаток - per the W3C rules:

Абсолютно расположенный ребенок использование биоэтанола контейнер не участвует в гибкой компоновке.

Answer 2

вы можете добавить flex-shrink, чтобы уменьшить это пространство. Добавить в .leftnav {}

flex-shrink: 7; 

Вот раздвоенный версия пера: http://codepen.io/mimoYmima/pen/wMqOmr