third out of four child divs, take up remaining width of parent

Question

I need the 3rd out of 4 children of a div to take up the remaining space. Here is some sample code im working with https://jsfiddle.net/68s5q34v/

<div class="container">
  <div class="menu">
    <div class="one">
      one
    </div>
    <div class="two">
      two
    </div>
    <div class="remaining">
      remaining
    </div>
    <div class="three">
      three
    </div>
  </div>
</div>

.container{
  width:100%;
  background-color:tomato;
  padding:4px 0;
}
.menu{
  background-color:orange;
  width:300px
}
.one,.two,.three{
  background-color:dodgerblue;
}
.remaining{
  background-color:green;
}
.menu,.one,.two,.three,.remaining{
  padding:5px;
}
div{
  display:inline-block;
  border:1px solid black;
}

the width of [one][two][remaining][three] are unknown.

[one],[two],[three] should only take up as much space as they need for their inner text.

[remaining] should take up what remains, pushing [three] to the end, essentially not showing any orange.

note: There are similar questions, but! i cant find one that matches my question with the detail that my child elements does not have a set width.

repeating the same question will lead to the same closure: https://stackoverflow.com/q/73603191/8620333 .. and you edit doesn't make sense. 2 items of 4 items won't change the method you have to use which is the same (even if you don't have fixed width as well). Take the time to learn and understand Flexbox — Temani Afif, Sep 05 '22 at 09:07

score 0 · Accepted Answer · answered Sep 05 '22 at 06:51

Go for display: flex approach;

Apply display: flex for .menu and flex: 1; for .remaining

.container{
  width:100%;
  background-color:tomato;
  padding:4px 0;
}
.menu{
  background-color:orange;
  width:300px;
  display: flex;
}
.one,.two,.three{
  background-color:dodgerblue;
}
.remaining{
  background-color:green;
  flex: 1;
}
.menu,.one,.two,.three,.remaining{
  padding:5px;
}
div{
  display:inline-block;
  border:1px solid black;
}

<div class="container">
  <div class="menu">
    <div class="one">
      one
    </div>
    <div class="two">
      two
    </div>
    <div class="remaining">
      remaining
    </div>
    <div class="three">
      three
    </div>
  </div>
</div>

<p>
the width of [one][two][remaining][three] are unknown.
<br/><br/>
[one],[two],[three] should only take up as much space as they need for their inner text.
<br/><br/>
[remaining] should take up what remains, pushing [three] to the end, essentially not showing any orange.
</p>

thank you for actually reading my question, and solving it. much appreciated! — Jason, Sep 05 '22 at 09:20
@Jason it's funny that you complain about the duplicate and end accepting an answer that is exactly the same as in the duplicate ... — Temani Afif, Sep 05 '22 at 20:52

third out of four child divs, take up remaining width of parent

1 Answers1