Flex layout overflow внешний контейнер

У меня есть fiddle, показывающий мой код. Он работает так, как я хочу: в основном это контейнер с 1 элементом строки, который занимает 100% в ширину и два элемента с фиксированной шириной. Если контейнер достаточно большой, он должен оставаться в очереди, иначе они должны быть обернуты.Flex layout overflow внешний контейнер

Не понимаю, почему, когда мой порт просмотра становится меньше, два меньших блока начинают переполняться со стороны за пределами контейнера, и они не сжимаются, как я ожидаю. Я попытался удалить фиксированную ширину и использовать flex-basis, но он разбивает макет.

Это код на скрипке:

<div class="container"> 
    <div class="search-form flex-row"> 
     <span class="block big">hi</span> 
     <div class="flex-block"> 
      <span class="block">hi</span> 
      <span class="block">hi</span> 
     </div> 

     <span class="block">hi</span> 
    </div> 
</div>

CSS:

.container{ 
    height:100vh; 
    width:100%; 
    padding:50px; 
} 
.search-form { 
    /* margin-bottom: 0px; */ 
    margin: auto; 
    height: 100%; 
    font-size: 18px; 
    background-color:blue; 

} 
.flex-row { 
    width: 100%; 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-around; 
    flex-direction: column; 
    align-items: center; 
} 
.flex-block{ 
display:flex; 
    flex-wrap:wrap; 
    justify-content: center; 
} 
.block{ 
    flex-shrink:1; 
    width:150px; 
    background-color:red; 
    margin:5px; 
} 
.block.big{ 
    width:100% 
}

источник

2015-10-19 MQ87

Я запутался, почему вы обращаетесь к "строк", но с помощью 'Flex-направление: column'. У вас есть фиксированная ширина блоков ... flexbox isn'tgoing, чтобы переопределить это. –

Я говорю о строках, потому что в основном первая строка одного элемента, а вторая - строка из двух элементов. Затем они обертываются как один элемент в строки, так что, как и обычная раскладка столбцов. – MQ87

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

Sry, я не имею 50 репутации, поэтому мне нужно awnser.

Первый (возможно) проблема:

вы положили мета-тег для видового экрана в голове

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Второй (возможно) компромисс:

может быть, вы можете работать с min-width?

источник

2015-10-19 15:33:05

–

Простая математика: 100% + 100px = слишком много

.container{ 
    height:100vh; 
    width:100%; 
    padding:50px; /* Issue */ 
}

на помощь вы можете использовать

fiddle demo using border-box

*{margin:0; box-sizing: border-box;}

или

fiddle demo using calc()

.container{ 
    height:100vh; 
    width: calc(100% - 100px); /* cause 50padd + 50padd = 100 */ 
    padding:50px; 
}

источник

2015-10-19 15:54:03

Flex layout overflow внешний контейнер

ответ

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