Fill vertically but keep width according to content

Question

In the following example:

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
}

#main {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: row;
}

#whiteboard {
  flex: 1 1 auto;
  background-color: LightGreen;
  display: inline-flex;
  flex-direction: column;
}

#whiteboardPanel {
  display: inline-flex;
  overflow: auto;
}

#whiteboardContent {
  height: 1000px;
  width: 100px;
  background-color: White;
}

<div id="main">
  <div id="whiteboard">
    <div id="whiteboardPanel">
      <div id="whiteboardContent">Blah, blah, ...</div>
    </div>

    <div>Some buttons here</div>
  </div>
</div>

The scrollbar appears at the right of the window. I like to have it touching the white part, that is, touching the content of the div "whiteboardPanel".

The problem appears seems to be because "whiteboardPanel" grows till use all the window width. I need to keep the width of this div according to its content ("whiteboardContent" div in the example), without growing.

Notes:

html, body and main definitions are used in some other elements the page, better to keep them as they are.
if possible, "#whiteboard" should cover all window. In the real case, some other divs will appear at this level, brothers of this div, in rows and placed at the left of this div. "whiteboard" is the one that must grow to fill all available space.
It is a plus if "whiteboardPanel" and the buttons could appear centered horizontally, not touching the left side of the window.
Solutions in plain html, css and javascript are preferable to other ones based external libs as jQuery.
I known there are several similar questions but not yet found any one with an applicable solution.

So, just to make sure, switching to `display: inline-flex` on `#main` is not an option? https://jsfiddle.net/L8zt6dr7/ — Michael Benjamin, Jul 05 '19 at 11:45
@Michael_B: yes, no problem, I've tested with "block", "inline", "flex", "inline-flex", ... . But please, note the comment about "whiteboard" filling all remaining space. — pasaba por aqui, Jul 05 '19 at 11:47

score 2 · Answer 1 · answered Jul 05 '19 at 11:39

Your #whiteboard rule is setting the flex to 1 1 auto. Which means your flex-basis is taking 100% of the space. Change that and the size will be limited to the content.

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
}

#main {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: row;
}

#whiteboard {
  background-color: LightGreen;
  display: inline-flex;
  flex-direction: column;
}

#whiteboardPanel {
  display: inline-flex;
  overflow: auto;
  position: relative;
  /* any non static, to allow child position absolute */
}

#whiteboardContent {
  height: 1000px;
  width: 100px;
  background-color: White;
}

<div id="main">
  <div id="whiteboard">
    <div id="whiteboardPanel">
      <div id="whiteboardContent">Blah, blah, ...</div>
    </div>

    <div>Some buttons here</div>
  </div>
</div>

Hi. Thanks for your help. Whiteboard (green part) must fill all window, if possible. — pasaba por aqui, Jul 05 '19 at 11:44

score 2 · Accepted Answer · answered Jul 05 '19 at 12:16

2

Based on what I understand about your requirements, I think the best solution involves nesting the content in an additional wrapper. This further isolates the content from the rest of the container, allowing for a targeted scrollbar.

#main {
  height: 100vh;
  display: flex;
}

#whiteboard {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: LightGreen;
}

#whiteboardPanel {
  min-height: 0;  /* https://stackoverflow.com/q/36247140/3597276 */
  display: flex;
}

#whiteboardContent {
  overflow: auto;
  width: 100px;
  background-color: White;
  display: flex;
}

#whiteboardContent>span {
  height: 1000px;
}

body {
  margin: 0;
}

<div id="main">
  <div id="whiteboard">
    <div id="whiteboardPanel">
      <div id="whiteboardContent">
        <span>Blah, blah, ...</span>
      </div>
    </div>
    <div>Some buttons here</div>
  </div>
</div>

jsFiddle demo

answered Jul 05 '19 at 12:16

Michael Benjamin

346,931
104
581
701

Thanks for your answer. Yes, it is the expected result. Could you explain? In particular, why the min-height with the default value 0 is need? – pasaba por aqui Jul 05 '19 at 13:51
A flex item cannot be smaller than its defined length or the size of its content along the main axis. Since this particular item is in a column-direction container, the default height is `min-height: auto`. With `min-height: 0` you override the default and allow the item to shrink below its fixed height, and remain with the screen limit. (I provided a link to the explanation in a code comment.) – Michael Benjamin Jul 05 '19 at 13:56
1

Thanks a lot, I've included it in the real case and it does the job. – pasaba por aqui Jul 05 '19 at 14:58

Fill vertically but keep width according to content

2 Answers2

jsFiddle demo