Переполнение: авто вызывает обрезание вертикально центрированных элементов с помощью Flexbox

Первая ссылка - модель flexbox 2009:

http://jsfiddle.net/vLKBV/





    
        HELLO
    



и второй - пересмотренная версия 2011 - 2012 гг .:

http://jsfiddle.net/MNRgT/1/





    
        HELLO
    



Если вы измените размер результата по вертикали, вы увидите, чтоПРИВЕТ" исчезает в новой гибкой модели, и если вы прокрутите вниз, это даст вам пустое пространство снизу. С другой стороны, старая гибкая модель ведет себя правильно.

Есть ли способ обойти это в новейшей версии Chrome v26.0.1410.65?

Ответы на вопрос(1)

К сожалению, различие между спецификациями 2009 и 2012 годов связано не только с разными именами свойств. Реализация неполных черновиков - это всегда азартная игра, поэтому всегда безопаснее предположить, что браузеры, которые следуют более новой спецификации, имеют правильное поведение (даже если это не так).т поведение, которое вы хотите).

Прелесть Flexbox в том, что он предлагает множество различных способов достижения определенного макета. Одна из недооцененных возможностей Flexbox заключается в том, что ценностьавто поскольку верхние и нижние поля действительно работают так, как они звучат, и это именно то, что вам нужно здесь вместо justify-contents / align-items.

http://codepen.io/cimmanon/pen/DEnHh

html, body {
  background: #000;
  width: 100%;
  height: 100%;
  margin: 0;
}

div.container {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  height: 100%;
}

div.side {
  background: #F00;
  width: 50px;
}

div.center {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow-Y: scroll;
  background: #0f0;
}

div.child {
  margin: auto;
  background: white;
  width: 10em;
}


  
  
    
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta elit vel ante hendrerit facilisis. Curabitur aliquam sollicitudin diam, id posuere elit consectetur nec.
    
  
  

ВАШ ОТВЕТ НА ВОПРОС