Make right hand column fill remaining space

Question

I have a simple flexbox layout...

.container {
    display:flex;
    flex-direction:row;
    width:100%;
}

.left {
    background:red;
}

.left img {
    padding:20px;
}

.right {
    background:green;
}

<div class="container">

<div class="left">
    <img src="https://dummyimage.com/300x200/000/fff">
</div>

<div class="right">
Right content
</div>

</div>

How do I make the right column fill the remaining space?

score 0 · Answer 1 · answered Jul 29 '19 at 18:14

you can add flex: 1; to .right

.container {
    display:flex;
    flex-direction:row
    width:100%;
}

.left {
    background:red;
}

.left img {
    padding:20px;
}

.right {
  background:green;
  flex: 1;
}

<div class="container">

<div class="left">
    <img src="https://dummyimage.com/300x200/000/fff">
</div>

<div class="right">
Right content
</div>

</div>

score 0 · Answer 2 · answered Jul 29 '19 at 18:14

How about flex-grow?

.container {
    display:flex;
    flex-direction:row
    width:100%;
}

.left {
    background:red;
}

.left img {
    padding:20px;
}

.right {
    background:green;
    flex-grow:1;
}

<div class="container">

<div class="left">
    <img src="https://dummyimage.com/300x200/000/fff">
</div>

<div class="right">
Right content
</div>

</div>

Make right hand column fill remaining space

2 Answers2