Div side by side with variable size, but always filling 100%

Question

I have two divs that I want to put side by side in a container. The problem I am having is that the left div has a veriable size depending on the content and the right div should use all available space.

<style>
div.left {
    display: inline-block;
    outline-width: 0;
    background-color: yellow;
    padding-right: 5px;
}

div.right{
    display: inline-block;
    max-width: 100%;
    outline-width: 0;
    background-color: green;
}

.container{
    background:black;    
    width:450px;
}
</style>

<div class="container">
    <div class="left">
        LEFT
    </div>
    <div class="right">
        RIGHT
    </div>
</div>

I tried with flex, table-cell, ... - almost everything. What am I missing?

score 2 · Accepted Answer · answered Apr 07 '20 at 12:12

display: flex would do the job if you also assign flex:1 to the .right div, so it will take all the remaining space:

div.left {
    background: peachpuff;
    padding: 10px;
}

div.right{
    flex: 1;
    background-color: yellowgreen;
    padding: 10px;
}

.container{
    background:black; 
    display: flex;
    width:450px;
}

<div class="container">
    <div class="left">
        Variable content here
    </div>
    <div class="right">
        remaining space
    </div>
</div>

Div side by side with variable size, but always filling 100%

1 Answers1