Flexbox и переполнение скрытый не работает должным образом

Так что я немного HTML:Flexbox и переполнение скрытый не работает должным образом

<div class="flex"> 
    <div class="red"> 
    <div class="example"> 
     <div class="wide"> 
     </div> 
    </div>  
    </div> 
    <div class="orange"></div> 
    <div class="yellow"></div> 
    <div class="green"></div> 
    <div class="blue"></div> 
    <div class="indigo"></div> 
</div> 

<div class="flex"> 
    <div class="red"></div> 
    <div class="orange"></div> 
    <div class="yellow"></div> 
    <div class="green"></div> 
    <div class="blue"></div> 
    <div class="indigo"></div> 
</div>

И мой CSS:

.flex { 
    display: -webkit-box; 
    display: flex; 

    height: 100px; 
    width: 100%; 
} 

.flex > div { 
    flex-grow: 1; 
    flex-shrink: 1; 
    flex-basis: auto; 

    -webkit-flex-grow: 1; 
    -webkit-flex-shrink: 1; 

    margin: 15px; 
} 

.example { 
    overflow: hidden; 
    width: 100%; 
    border: 1px solid black; 
} 

.example .wide { 
    width: 400px; 
}

Теперь проблема здесь есть, если у меня есть DIV внутри элемент, который является flexbox, и что div имеет переполнение: hidden; Я бы ожидал, что родительский flexbox просто займет пространство по умолчанию (то есть то же, что и другие элементы, но это не так). Это похоже на то, что он игнорирует переполнение и просто расширяет div в любом случае.

I сделали codepen, так что вы можете увидеть проблему:.?

http://codepen.io/r3plica/pen/dGPmyN?editors=110

Я хотел бы все цветные дивы быть такой же ширины

может кто-нибудь помочь

источник

2015-12-08 r3plica

извините, но как вопрос 'Flexbox не дает равную ширину elements' дубликата для' Flexbox и перелива скрытого не работает properly' ?? Является ли одно из названий неправильным? Который из? Я прихожу сюда для ответа на вопрос, почему 'overflow: hidden' не работает над моей гибкой макетой, но теперь мне нужно прочитать какой-то вопрос об ширине элементов? Как на земле это когда-нибудь будет работать? Умеренность действительно сошла с ума здесь, в SO! –

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

Ваш проблема вызвана установкой flex-basis от .flex > div до auto. Это приводит к тому, что div расширяется, чтобы разместить его содержимое, поскольку он не имеет заданного размера вдоль оси гибки. Дайте ему заданное значение, например 20px, и пространство будет равномерно разделено, потому что flex-grow установлено на 1.

This article должен помочь вам начать работу с гибким макетом.

Вот modified version вашего код

.flex { 
    display: -webkit-box; 
    display: flex; 

    height: 100px; 
    width: 100%; 
} 

.flex > div { 
    flex-grow: 1; 
    flex-shrink: 1; 
    /* set value for the flex basis, the two properties above will evenly 
    divide the space. */ 
    flex-basis: 20px; 

    -webkit-flex-grow: 1; 
    -webkit-flex-shrink: 1; 

    margin: 15px; 
    overflow: hidden; 
} 

.example { 
    overflow: hidden; 
    border: 1px solid black; 
} 

.example .wide { 
    width: 400px; 
    height: 10px; 
}

источник

2015-12-08 12:22:11

Flexbox и переполнение скрытый не работает должным образом

ответ

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