горизонтальный прокрутка flex child

Question

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

Вот пример codepen:

http://codepen.io/anon/pen/Wxjjqp

.container { 
    display: flex; 
} 

.horizontally-scrolled-items { 
    display: flex; 
    background: lightblue; 
    overflow-x: scroll; 
} 
.item { 
    width: 1000px; 
    border: 1px solid blue; 
} 

HTML:

<div class="container"> 
    <div class="horizontally-scrolled-items"> 
    <div class="item">item1</div> 
    <div class="item">item2</div> 
    <div class="item">item3</div> 
    </div> 
    <div class="aside"> 
    <button>keep me on screen</button> 
    </div> 
</div> 

Идея для horizntally-прокручиваться-элементы, чтобы быть гибким: 1. Если элементы больше ширины контейнера, для их прокрутки, оставляя в стороне вид.

Answer 1

Вы можете достичь этого с помощью min-width. Дайте .item класс a min-width с flex-grow: 1;. Затем установите .horizontally-scrolled-items div на width: 100%;.

CSS

.horizontally-scrolled-items { 
    width: 100%; 
} 

.item { 
    min-width: 400px; 
    flex-grow: 1; 
} 

CodePen

Answer 2

Другой способ установить элементы с и flex: 0 0 auto, которые коротка рука для flex-grow: 0; flex-shrink: 0, так Flexbox не пытается изменить размер элементов.