CSS3 Flexbox полноразмерное приложение и переполнение

У меня есть приложение, которое использует классическую электронную почту, такую как макет, как показано ниже.

Я построил его с использованием новой модели CSS3 flexbox, и она блестяще работает, пока я не добавлю возможность динамически добавлять новые элементы в поле папок. Я бы надеялся, что flexbox работал таким образом, что до тех пор, пока в папке будет пустое место, оно не станет появляться в окне задач под ним. К сожалению, это не то, что я вижу (в Chrome 17).

Я создал JSFiddle здесь, который демонстрирует проблему. Просто нажмите ссылку Добавить папку, и вы увидите, что окно с папками растет, хотя у него достаточно места для размещения нового ребенка.

На вопрос. Как я могу построить два вертикально выровненных блока с помощью flexbox таким образом, чтобы одна занимала две трети доступной высоты (box-flex 2), а другая треть ( flex 1), и что они делают это таким образом, что при добавлении нового содержимого в первый блок он не начинает расти, пока он не выходит из космоса.

Ответ 1

Я не могу точно сказать, что это ошибка браузера, или если это действительно то, как должна работать гибкая модель. Если это так, я должен согласиться с тем, что не совсем интуитивно!

Я нашел работу, обернув списки в абсолютно позиционированном div с переполнением, установленным в auto. Это позволяет гибким блокам поддерживать свои исходные состояния и изменять их только при пересчете всего макета в сравнении с изменением содержимого.

Здесь обновленная разметка:

<section id="folders">
   <div class="dynamicList">
   <h2>Folders</h2> 
   <ul>
      <li>Folder 1</li>
      <li>Folder 2</li>
   </ul> 
   <a href="#" id="add">Add Folder</a>
   </div>      
</section>

И обновленный CSS:

#left #tasks,
#left #folders {
  position: relative;
}

.dynamicList {
  bottom: 0;
  left: 0;
  overflow: auto;
  position: absolute;
  right: 0;
  top: 0;
}

Я разыграл твою скрипку на демо: http://jsfiddle.net/MUWhy/4/

UPDATE:

Если вы хотите, чтобы заголовки оставались фиксированными и имели только прокрутку содержимого списка каталогов и списков задач, я бы подумал о том, чтобы поместить заголовки и кнопки добавления в свои поля с фиксированной высотой в div #left. Это немного больше, но все еще довольно просто. Я не пробовал это на JSFiddle, но я думаю, что это лучший путь.

Ответ 2

У меня есть этот ответ из моего другого вопроса, который больше или меньше: fooobar.com/questions/7638/...

Вместо решения @LukeGT, что это обходной путь, а не решение для получения эффекта, вы можете применить высоту к элементу, где вы хотите видеть вертикальную прокрутку.

Итак, лучшее решение , если вы хотите минимальную высоту в вертикальной прокрутке:

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    min-height: 100px;
}

Если вы просто хотите полную вертикальную прокрутку, если недостаточно места для просмотра статьи:

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px; /* or height:0px */
}

Если вы не задаете высоту (используя высоту или минимальную высоту), вертикальная прокрутка не будет установлена. Во всех случаях даже с высотой: 0px; вычисленная высота элемента будет отличаться от нуля.

Мое решение с префиксом -webkit: http://jsfiddle.net/ch7n6/4/

Edit

Так как Firefox теперь поддерживает полную спецификацию flexbox, удаление префикса -webkit-vendor будет работать со всеми браузерами.

Ответ 3

Я предпочитаю это решение для Jim, так как он меньше взломан - он будет работать на любом flexbox на любой части страницы. Джим может работать только на коробке в самом верхнем левом углу страницы.

Я решил это, обернув часть гибкой коробки, которую я хотел прокрутить внутри div.scrollbox. Я сделал, чтобы прямые дети этого div имели высоту 0, так что добавление дополнительных элементов внутри него не повлияло бы на остальную часть макета. Я также установил overflow-y в auto так, чтобы появлялась полоса прокрутки, если ее дети выходят за пределы ее.

.scrollbox {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
}
.scrollbox > * {
    height: 0;
}

Обратите внимание, что это будет работать только в том случае, если расширяемый контент помещается в содержащий элемент или содержащий элементы. В этом примере элементы li содержатся внутри содержащего элемента ul, поэтому он работает.

Мне также пришлось внести некоторые изменения, чтобы получить 3 компонента верхнего левого flexbox, чтобы упорядочить себя правильно, но это было специфичным для приложения.

#folders {
    display: -webkit-flex;
    -webkit-flex-flow: column;
}
#folders h2, #folders #add {
    -webkit-flex: 0 1 auto;
}

Я раскрыл приведенный выше jsfiddle здесь: http://jsfiddle.net/FfZFG/.