Make HTML Element Expand To Fit Content

Question

I'm writing a web app, predominantly in AngularJS using CSS's flexbox for some of the layout, if that matters. I've been going crazy over the last few hours trying to solve the problem I'm currently stuck on.

The problem I'm running into is as follows: There are two side by side divs on a page. The leftmost div is a menu that must always be the height of the document's content or the browser window (whichever is greater). The rightmost div is the one that content gets appended to dynamically. When the program starts, the rightmost div is less than the height of the browser window (because it does not have much content) but as the application progresses, content gets added to it such that it eventually is much longer than the browser window.

A JSFiddle that shows the problem can be found by clicking here.

The HTML structure of the fiddle is mostly fixed (containers can be added but should not be removed) as this is a tremendous simplification of a complex application that has that same basic structure. Additionally, I set all the CSS heights to 100% solely because of reading another answer, not because I know they are required to make this work (I do want the menu to start out full screen even with minimal content, however).

The black div represents the menu and the yellow div represents the one that holds the content. When the "click me to add content" button is clicked, 100 lines of content are appended to the content div which then makes it longer than the window. The desired effect is for both the yellow and black divs to expand such that the yellow div is as big as it needs to be to hold the content and the black div is the same height as the yellow div. Instead, what happens (as you can see) is neither the black nor the yellow divs expand when the content is added and the content simply flows outside of the bounds of the yellow div.

I've researched this problem to the best of my ability on stackoverflow and elsewhere and no presented solutions appear to work for this type of dynamic content (although I may be, and problably am, missing something). Such answers like this one and this one recommend using the min-height property on some elements but when I tried it, the black and yellow divs started small (size of the content, not the full browser height) but did expand correctly. Basically, when I try other people's solutions, it appears that I can either have divs that start out small (less than full screen) and grow correctly or start out correctly (full screen, even though initial content is smaller) and don't grow but not both (I would like divs that start out correctly and grow to fit content). Additionally, answers such as this one suggest combinations of min-height and height to achieve one effect or the other, but not the both I am looking for.

I would really appreciate any help I can get and I thank you for your time.

EDIT:

Truncated version, for those who are in a rush.

I'd like the ability to make two side by side divs start out the full height of the browser window even when there is no content in them. Then, when enough content is added to one of the divs to make it larger than the browser, both divs expand to fit the available content. JSFiddle is available at this link. The problem with the fiddle is the yellow and black divs don't expand to fit the new content when the add new content button is pushed.

If you're going to ask a question and write this much about it please offer a truncated tl;dr. — Scott Sword, Jul 02 '15 at 04:25
@Swordfish0321 Done - added brief summary at the bottom for those who would like it — cryptopi, Jul 02 '15 at 04:29

score 2 · Answer 1 · answered Jul 02 '15 at 04:59

2

You can use display:table-cell to achieve this. Please check JSfiddle.

answered Jul 02 '15 at 04:59

Harshal Sawant

607
3
7

score 2 · Answer 2 · edited May 23 '17 at 11:45

Playing around with the CSS from this question - nested flexbox optimization - I was able to get your example working, while simplifying your CSS quite a bit.

The trick seems to be to start flexing at the body element, and to tell the container(s) to grow, but never shrink:

body {
    display: flex;
    flex-direction: column;
}

.container, .subContainer {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    flex-grow: 1;
}

Updated JSFiddle with complete code (<div class="subContainer"> isn't needed, and can be removed if you don't need it for other things): http://jsfiddle.net/aej8na8q/38/

Thanks! This provided really interesting information - undoubtedly useful in the future — cryptopi, Jul 03 '15 at 02:54

score 1 · Accepted Answer · answered Jul 02 '15 at 12:13

Using flexbox I came up with this structure which seems to meet your initial criteria.

I added a demo in Codepen with an extra-tall 'extender' div so you can see the effect when a lot of content is added.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  min-height: 100%;
}
.wrapper {
  display: flex;
  flex-direction: column;
  border: 1px solid red;
  min-height: 100vh;
}
main {
  flex-grow: 1;
  border: 1px solid red;
  height: 100%;
  display: flex;
}
.left {
  width: 200px;
  background: lightblue;
  flex: none;
}
.right {
  flex-grow: 1;
  background: salmon;
}

<div class="wrapper">
  <main>
    <div class="col left">
      <h3>Fixed Left</h3>
    </div>
    <div class="col right">
      <h3>Flexible Right</h3>
    </div>
  </main>
</div>

This is the answer I ended up using. The other ones appeared to work as well and I really appreciate them, but this one seemed to mesh with the rest of my application the best. Thanks for your time and assistance! — cryptopi, Jul 03 '15 at 02:53

Make HTML Element Expand To Fit Content

3 Answers3