Есть flex-контейнер, внутри 2 элемента расположенные по центру и вертикально с фиксированной шириной.
Вопрос: как заставить их ужиматься под ширину родителя при уменьшении его ширины.
.container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
background-color: white;
color: white;
}
.flex {
width: 250px;
}
.flex1 {
background-color: green;
}
.flex2 {
background-color: blue;
}
<div class="container">
<div class="flex flex1">1 блок</div>
<div class="flex flex2">2 блок</div>
</div>
Если оставить внутри один блок, а родителю задать flex-direction: row
и justify-content: center
будет работать так, как нужно - JSFiddle, но нужно 2 элемента внутри
.flex { max-width: 250px; }
вместо.flex { width: 250px; }
, не?