<div class="flex">
<div class="item-a">flex-grow: 1;</div>
<div class="item-b">flex-grow: 9999;</div>
</div>
.flex {
display: flex;
flex-wrap: wrap;
> * {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
height: 240px;
font-weight: 700;
font-family: arial, sans-serif;
color: #222;
}
}
/* コンテナーのブレイクポイント
240 + 400 = 640px */
.item-a {
flex: 1 1 240px;
background: #faa;
}
.item-b {
flex: 9999 1 400px;
background: #aea;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.