flexbox: контент overflow-ится при nowrap и выравнивании по центру

327

16 февраля 2018, 17:24

Обычная задача - выровнять 2 блока по центру страницы. Ширина блоков указана в единицах измерения vw. Проблема при выравнивании флексом в том, что когда уменьшаешь ширину окна, весь контент уходит в overflow. А нужно поведение именно nowrap.

Собственно выровнять получилось с помощью display: table. Но хотелось бы узнать, можно ли это сделать как-то с flex или хотя бы float-ами.

Ниже привел codepen, в css 3 варианта (2 закоментировано), которыми пытался решить:

display: table
float: left
display: flex

Также пробовал display: inline-block, но получил результат как и с флоатом.

https://codepen.io/tsamsiyu/pen/BYwzEp?editors=1100

Answer 1

Вот так?

/* COMMON STYLES */ 
 
#left>div, 
#right>div { 
  outline: 1px solid black; 
  margin: 1vw; 
} 
 
#left { 
  width: 20vw; 
  min-width: 200px; 
} 
 
#right { 
  flex-basis: 60% 
} 
 
#container { 
  display: flex; 
  justify-content: center; 
  flex-flow: row nowrap; 
  max-width: 100vw; 
}

<div id="container"> 
  <div id="left"> 
    <div style="height: 150px"></div> 
    <div style="height: 30px"></div> 
  </div> 
  <div id="right"> 
    <div style="height: 50px"></div> 
    <div style="height: 50px"></div> 
  </div> 
</div>