Allow inner div to occupy remaining width

Question

So i have the following in HTML:

and the blue rectangle occupies 70% of the width of the outer container and the green rectangle occupies 30% of the width of the outer container.

Now what I'm trying to achieve is that, when I set the green rectangle div to "display:none", I would want the blue rectangle div to fill up the remaining of the width of the outer div so i could get something like:

Right now, if i set the green rectangle div to display:none, i get the following:

Would appreciate some help on this.

html, body {
    height: 100%;
}

#outer {
    border: 1px solid black;
    height: 20%;
    width: 50%;
    display:flex;
}

#inner_long {
    width: 70%;
    background-color: blue;
}

#inner_short {
    width: 30%;
    background-color: green;
    /*display:none;*/
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href = "style.css">
  <title>Document</title>
</head>
<body>
  <div id = "outer">
    <div id = "inner_long">

    </div>
    <div id = "inner_short">

    </div>
  </div>
</body>
</html>

Hao Wu · Accepted Answer · 2020-11-06T05:46:20.520

Since you're using flex, you should use flex property along with flex-basis to give the short one a fixed width, and make the long one occupies whatever space is left by assigning flex: 1 to it:

html, body {
    height: 100%;
}

#outer {
    border: 1px solid black;
    height: 20%;
    width: 50%;
    display:flex;
}

#inner_long {
    /* make the long one takes as much space as possible */
    flex: 1;
    background-color: blue;
}

#inner_short {
    /* make short one takes fixed 30% of space */
    /* by default, this will make the long one takes 70% of space since 30% of space is already taken by the short one */
    /* but if the short one is gone, the long one will occupie its space */
    flex: 0 0 30%;
    background-color: green;
    /*display:none;*/
}

<div id = "outer">
  <div id = "inner_long"></div>
  <div id = "inner_short"></div>
</div>

<br />

<div id = "outer">
  <div id = "inner_long"></div>
  <div id = "inner_short" style="display: none;"></div>
</div>

Allow inner div to occupy remaining width

1 Answers1