set div width to remaining space [duplicate] - html

Question

This question already has answers here:
How to make a div fill a remaining horizontal space?
(26 answers)
Closed 5 months ago.
I'm working on a page layout and have divs as columns, A,B,C,D,E. The problem is that column C needs to have its width set to/eat up the remaining horizontal space of the parent, in this case, the body.
width of A and E is percent based.
width of B and D is pixel based.
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
}
.col {
display: inline-block;
position: relative;
height: 100%;
padding: 0 10px;
}
.a {
background-color: #2a85ff;
width: 20%;
}
.b {
background-color: #83bf6e;
width: 100px;
}
.c {
background-color: #ff6a55;
}
.c span {
font-weight: bolder;
}
.d {
background-color: #8e59ff;
width: 200px;
}
.e {
background-color: #b5e4ca;
width: 20%;
}
<div class="col a">
<h1>A</h1>
w:%percent
<br/> h:100%
</div>
<div class="col b">
<h1>B</h1>
w:pixel
<br/> h:100%
</div>
<div class="col c">
<h1>C</h1>
<span>w:remaining</span>
<br/> h:100%
</div>
<div class="col d">
<h1>D</h1>
w:pixel
<br/> h:100%
</div>
<div class="col e">
<h1>E</h1>
w:%percent
<br/> h:100%
</div>
jsfiddle: https://jsfiddle.net/2bu7zv59/
thank you!

Answer 1

Using flex this is very easy to accomplish with the flex-grow property.
In the snippet below I wrapper the columns in a container div and then applied display: flex to the container. You can also simply apply display: flex to the body if you prefer that.
Then I applied flex-grow: 1 to column c.
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
}
.container {
display: flex;
height: 100%;
}
.col {
display: inline-block;
position: relative;
height: 100%;
padding: 0 10px;
}
.a {
background-color: #2a85ff;
width: 20%;
}
.b {
background-color: #83bf6e;
width: 100px;
}
.c {
background-color: #ff6a55;
flex-grow: 1
}
.c span {
font-weight: bolder;
}
.d {
background-color: #8e59ff;
width: 200px;
}
.e {
background-color: #b5e4ca;
width: 20%;
}
<div class="container">
<div class="col a">
<h1>A</h1>
w:%percent
<br/> h:100%
</div>
<div class="col b">
<h1>B</h1>
w:pixel
<br/> h:100%
</div>
<div class="col c">
<h1>C</h1>
<span>w:remaining</span>
<br/> h:100%
</div>
<div class="col d">
<h1>D</h1>
w:pixel
<br/> h:100%
</div>
<div class="col e">
<h1>E</h1>
w:%percent
<br/> h:100%
</div>
</div>

Answer 2

the easiest thing to do is to make the body of type display:flex. You can then use the flex-grow rule to expand the desired column to use up the rest of the width as follows:
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
width: 100%;
display: flex;
}
.col {
/* display: inline-block; */
position: relative;
height: 100%;
padding: 0 10px;
}
.a {
background-color: #2a85ff;
width: 20%;
}
.b {
background-color: #83bf6e;
width: 100px;
}
.c {
background-color: #ff6a55;
flex-grow: 2;
}
.c span {
font-weight: bolder;
}
.d {
background-color: #8e59ff;
width: 200px;
}
.e {
background-color: #b5e4ca;
width: 20%;
}
<div class="col a">
<h1>A</h1>
w:%percent
<br /> h:100%
</div>
<div class="col b">
<h1>B</h1>
w:pixel
<br /> h:100%
</div>
<div class="col c">
<h1>C</h1>
<span>w:remaining</span>
<br /> h:100%
</div>
<div class="col d">
<h1>D</h1>
w:pixel
<br /> h:100%
</div>
<div class="col e">
<h1>E</h1>
w:%percent
<br /> h:100%
</div>