Невозможно правильно установить Flexbox div

У меня есть небольшая проблема с моим кодом. с небольшим количеством текста он выглядит очень хорошо (светлячок/хром - окно развернуто):Невозможно правильно установить Flexbox div

CSS:

* { margin: 0; padding: 0; } 

html, body { height: 100%; max-height: 100%; overflow: hidden; width: 100%; } 

body > div:last-child > div { width: 100%; } 

body{ 
display: flex; 
flex-direction: column; 
} 

body > div:first-child{ 
display: flex; 
flex-grow: 0; 
height: auto; 
} 

body > div:first-child > div{flex-grow: 1;} 

body > div:last-child{ 
align-items: center; 
background-color: black; 
color: white; 
display: flex; 
flex-grow: 1; 
overflow: auto; 
}

HTML:

<body> 
<div> 
<div style="background-color: red;">Left</div> 
<div style="background-color: green; text-align: center;">Center</div> 
<div style="background-color: blue; text-align: right;">Right</div> 
</div> 
<div> 
<div style="text-align: center;"> 
Start<br> 
Test<br>Test<br>Test<br>Test<br>Test<br> 
Test<br>Test<br>Test<br>Test<br>Test<br> 
Test<br>Test<br>Test<br>Test<br>Test<br> 
Test<br>Test<br>Test<br>Test<br>Test<br> 
Test<br>Test<br>Test<br>Test<br>Test<br> 
End 
</div> 
</div> 
</body>

Но когда я добавляю: «Тест (...) "x2 - У меня проблема с высотой, которая по умолчанию установлена в auto.

JSFIDDLE.

JSFIDDLE с текстом x2 - это моя проблема.

Спасибо за любую помощь.

источник

2014-01-02 user3152974

Я не знаю, почему добавив Flex-базисные стоимости работ, устраняет проблему , но он:

http://jsfiddle.net/Sd8qm/5/

* { 
    margin: 0; 
    padding: 0; 
} 
html, body { 
    height: 100%; 
    max-height: 100%; 
    overflow: hidden; 
    width: 100%; 
} 
body > div:last-child > div { 
    width: 100%; 
} 
body { 
    display: flex; 
    flex-direction: column; 
} 
body > div:first-child { 
    display: flex; 
    flex: 0 auto; 
    height: auto; 
} 
body > div:first-child > div { 
    flex-grow: 1; 
} 
body > div:last-child { 
    align-items: center; 
    background-color: black; 
    color: white; 
    flex: 1 0 0; /* here */ 
    overflow: auto; 
}

Кроме того, не устанавливайте элементы display: flex, если вы на самом деле не нужно, чтобы они были гибкие контейнеры.

источник

2014-01-02 12:56:35 cimmanon

Спасибо за ваш ответ. Оно работает. Могу ли я сосредоточить текст вертикально и горизонтально с вашим решением? – user3152974

Вы использовали много ненужного CSS-кода. См. Это example.

Я использую этот CSS для выравнивания дивы меню:

float: left; 
width: 33%;

или вы можете попробовать добавить z-index: 3; к body > div:first-child > div , а также добавить height: 20px; в меню.

Example 2

Update

Вы можете попробовать этот метод: Example 3

источник

2014-01-02 09:14:58

Я знаю этот метод, но: * Мне нужна высота 100% для тела и всего содержимого * Inned переполнение скрыто для тела и переполнения авто для главного div Flexbox - это то, что мне нужно, но я имею только проблему с высотой и большим количеством строк в главном div. .. Спасибо за предложение – user3152974

Я добавил поддержку на 100% высоте. –

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

верхняя линия получает усаживается, потому что даже вы не указали его, body > div:first-childявляетсяусадку так как значение по умолчанию flex-shrink является 1

добавить flex-shrink:0 и вы разрешите проблеме

demohttp://jsfiddle.net/kN2x4/13/

источник

2014-01-02 23:20:09

Reaaly приятно, но я не вижу «Start». Хорошо, когда я удаляю текст. Вы можете это исправить, пожалуйста? – user3152974

oops! извините: обновлено: P http://jsfiddle.net/kN2x4/13/ –

Невозможно правильно установить Flexbox div

ответ

Смежные вопросы