How to make div to expand vertically without using overflow or javascript or hardcoded values such as margins

Question

This plunkr shows the issue.

http://plnkr.co/edit/Zr4ncVcNa53Sawbk42kK?p=preview

I'd like the blue divs to precisely cover up the red divs.

How do I do this?

The yellow divs cannot be hardcoded in terms of height because their content is variable.

I can't use overflow else the SVG will also overflow, cutting off my chart.

If restructuring the HTML is required (add, remove or moving elements), I can't do it at or above the container class (as I use an HTML partial system and this HTML is generated via nested partials).

I'd like it purely done in the container, variable and fill-vertically CSS classes.

HTML

<li class="fixed left">
  <view-widget>
    <view-gadget>
      <div class="container">
        <div class="variable">
          Title
          <br>
          Subtitle
          <br>
          Something else
        </div>
        <div class="fill-vertically">
          SVG Kendo Chart
        </div>
      </div>
    </view-gadget>
  </view-widget>
</li>

<li class="fixed right">
  <view-widget>
    <view-gadget>
      <div class="container">
        <div class="variable">
          Title
        </div>
        <div class="fill-vertically">
          SVG Kendo Chart
        </div>
      </div>
    </view-gadget>
  </view-widget>
</li>

CSS

.container {
  background:green;
}

.variable {
  background: yellow; 
}

.fill-vertically {
  background: blue;
  color: white;
}

.fixed {
  background: red;


  list-style: none; 
  height: 150px; 
  width: 45%;
}

.left {
  position: absolute;
  left: 0;
}

.right {
  position: absolute;
  right: 0;
}

cover like that? https://www.dropbox.com/s/64k3e7hrpnx2m4v/Screenshot%202014-01-17%2022.39.24.png on the blue on the red part? — Alvise Susmel, Jan 17 '14 at 21:39
@AlviseSusmel The problem with that image is now the boxes are of unequal height, it looks like. It's in a fluid grid (look up "gridster" if you're curious) so I can't have them different heights. — Jesus is Lord, Jan 17 '14 at 21:41
I've done something similar a few years ago using JS, but it's not acceptable here... — Minister, Jan 17 '14 at 21:47
hmmm... this is really hard to achieve... see the accepted answer here, covers it up: http://stackoverflow.com/questions/90178/make-a-div-fill-the-remaining-screen-space/90886#90886 — Félix Adriyel Gagnon-Grenier, Jan 17 '14 at 21:54
@FélixGagnon-Grenier Actually knowing that it's not possible helps a lot. I'll just have to make a directive for it. The reason I said no JS was because JS outside of angular is a headache because it's not sync'd with the digest cycle outside of a directive. — Jesus is Lord, Jan 17 '14 at 21:59
Why not just set the .fixed class to blue. It doesn't do what you want but it gives the visual solution. Other then that you would need javascript solution. — Matthew Rygiel, Jan 17 '14 at 22:02
@MatthewRygiel Probably because OP wants the chart (the element which says "SVG Kendo Chart") to take all the available vertical space. — Fabrício Matté, Jan 17 '14 at 22:10
@FélixGagnon-Grenier It is not really hard IMO. OP's case is very simple and can be achieved with flex-box or with table-layouting rules (see answer below). — Fabrício Matté, Jan 17 '14 at 22:34

Fabrício Matté · Accepted Answer · 2014-01-17T22:30:48.323

Using flexible boxes: Plunker

.container {
  height: 100%; /* fill .fixed's height  */
  display: flex;
  flex-direction: column;
}

.fill-vertically {
  flex-grow: 1;
}

Compatibility: Chrome, Firefox 28+, IE11+.

Use the display:table trick in case you need to support older browsers: Plunker

.container {
  display: table;
  width: 100%;
  height: 100%; /* fill .fixed's height  */
}
.variable, .fill-vertically {
  display: table-row;
}
.variable {
  height: 1px; /*computed = as little height as possible to fit content*/
}
.fill-vertically {
  height: 100%; /*computed = remaining available height*/
}

Compatible with IE8+ and all modern browsers.

How to make div to expand vertically without using overflow or javascript or hardcoded values such as margins

1 Answers1