Как сделать автоматически подстраивающийся по высоте фон (размер блока) под содержимое (relative/absolute, jquery)?

Question

[Алексей Смирнов]

Привет!
Есть такое перелистывающееся меню:
jsfiddle.net/ERAFY/7Y7Dg/4
В нем все работает как надо.

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

Если внутри идентификатора #home, сменить position: absolute на position: relative, то красный фон начнет подстраиваться по высоте, как и требуется. Но тогда перестает работать перелистывающееся меню.
Что в этом случае сделать?

Answer 1

[Юрий Лобанов]

jsfiddle.net/iiil/7Y7Dg/7
jsfiddle.net/iiil/7Y7Dg/8

Answer 2

[Kuzzy]

Flexbox спешит на помощь jsfiddle.net/7Y7Dg/6

Comments

[Алексей Смирнов]

Снова меня спасаешь

[Юрий Лобанов]

@ERAFY @Kuzzy
css-tricks.com/using-flexbox

Browser Support
If you do all this weaving, you can get:
Chrome any
Firefox any
Safari any
Opera 12.1+
IE 10+
iOS any
Android any

[Kuzzy]

@iiil Таки в мою картину мира это вписывается, уже больше года использую флексбокс и получаю удовольствие :)

[Юрий Лобанов]

@Kuzzy в ie очень низкая поддержка, как видите. Да и то, если все прописать правильно.
В данном конкретном случае все решается одной или двумя строчками на js. Не вижу смысла отказываться от поддержки ie из-за этого.

[Kuzzy]

@iiil я считаю, что если в верстке можно обойтись без лишнего JS то лучше обойтись, эта же проблема решается с помощью display: table jsfiddle.net/7Y7Dg/11 Да и на флотах решение можно придумать, а отказываться от всех прелестей флексбокса из-за богомерзкого ИЕ, который не первый год тормозит развитие веба я бы не стал, если критично, то ему можно фоллбэк придумать с сохранением основного функционала.

[Юрий Лобанов]

@Kuzzy ну насчет лишнего js я соглашусь. Насчет ie нет - тормозит или нет, но факт в том, что его используют. Сайты мы не себе на радость пишем.