Expand a div to take the remaining width

Question

I want a two-column div layout, where each one can have variable width e.g.

div {
    float: left;
}
.second {
    background: #ccc;
}

<div>Tree</div>
<div class="second">View</div>

I want the 'view' div to expand to the whole width available after 'tree' div has filled needed space. Currently my 'view' div is resized to content it contains It will also be good if both divs take up whole height

Not duplicate disclaimer:

Expand div to max width when float:left is set because there the left one has a fixed width.

Help with div - make div fit the remaining width because I need two columns both aligned to left

Answer 1

Flexbox solution

html, body {
  height: 100%;
}
.wrapper {
  display: flex;
  height: 100%;
}
.second {
  flex-grow: 1;
}

<div class="wrapper">
  <div style="background: #fc9;">Tree</div>
  <div class="second" style="background: #ccc;">View</div>
</div>

Note: Add flex vendor prefixes if required by your supported browsers.

Answer 2

This would be a good example of something that's trivial to do with tables and hard (if not impossible, at least in a cross-browser sense) to do with CSS.

If both the columns were fixed width, this would be easy.

If one of the columns was fixed width, this would be slightly harder but entirely doable.

With both columns variable width, IMHO you need to just use a two-column table.

Answer 3

You can try CSS Grid Layout.

dl {
  display: grid;
  grid-template-columns: max-content auto;
}

dt {
  grid-column: 1;
}

dd {
  grid-column: 2;
  margin: 0;
  background-color: #ccc;
}

<dl>
  <dt>lorem ipsum</dt>
  <dd>dolor sit amet</dd>
  <dt>carpe</dt>
  <dd>diem</dd>
</dl>

Answer 4

Im not sure if this is the answer you are expecting but, why don't you set the width of Tree to 'auto' and width of 'View' to 100% ?

Answer 5

Check this solution out

.container {
  width: 100%;
  height: 200px;
  background-color: green;
}
.sidebar {
  float: left;
  width: 200px;
  height: 200px;
  background-color: yellow;
}
.content {
  background-color: red;
  height: 200px;
  width: auto;
  margin-left: 200px;
}
.item {
  width: 25%;
  background-color: blue;
  float: left;
  color: white;
}
.clearfix {
  clear: both;
}

<div class="container">
  <div class="clearfix"></div>
  <div class="sidebar">width: 200px</div>

  <div class="content">
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
  </div>
</div>

Answer 6

You can use W3's CSS library that contains a class called rest that does just that:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div class="w3-row">
  <div class="w3-col " style="width:150px">
    <p>150px</p>
  </div>
  <div class="w3-rest w3-green">
    <p>w3-rest</p>
  </div>
</div>

Don't forget to link the CSS library in the page's header:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

Here's the official demo: W3 School Tryit Editor