CSS - Shrink a Parent Div to Fit One Child's Width and Constrain the Width of the Other Child

css - shrink a parent div to fit one child's width and constrain the width of the other child

See this edited version of your jsFiddle.

Here's what's added to the CSS:

#container {
    display: table-cell;
}
#child1 {
    display: table-row;
    width: 1px;
}
#child2 {
    display: table-cell;
    width: 1px;
}

How to force child div to be 100% of parent div's height without specifying parent's height?

NOTE: This answer is applicable to legacy browsers without support for the Flexbox standard. For a modern approach, see: https://stackoverflow.com/a/23300532/1155721

I suggest you take a look at Equal Height Columns with Cross-Browser CSS and No Hacks.

Basically, doing this with CSS in a browser compatible way is not trivial (but trivial with tables) so find yourself an appropriate pre-packaged solution.

Also, the answer varies on whether you want 100% height or equal height. Usually it's equal height. If it's 100% height the answer is slightly different.

Cross browser method to fit a child div to its parent's width

The solution is to simply not declare width: 100%.

The default is width: auto, which for block-level elements (such as div), will take the "full space" available anyway (different to how width: 100% does it).

See: http://jsfiddle.net/U7PhY/2/

Just in case it's not already clear from my answer: just don't set a width on the child div.

You might instead be interested in box-sizing: border-box.

restrict child div height to parent container height

The overflow you see happens because there is already an element taking up some space of the parent, so height: 100% plus the height of the other element will obviously exceed the parents height.

There are different ways to solve the problem.

I recommend one of these two ways:

CSS Flexbox
CSS Grid

However, you can also solve them using these ways:

CSS calc()
JavaScript

CSS Flexbox

The parent needs display: flex and flex-direction: column to lay out its children in a column.

The child that should grow to take up the remaining space needs flex-grow: 1.

/* Ignore; only for displaying the example */
* {
  margin: 0;
  font-size: 24px;
}
html, body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.graph-container, .graph {
  border: 3px solid black;
  box-sizing: border-box;
}

/* The answer */
.graph-container {
  height: 60vh;
  width: 70vw;
  
  display: flex;
  flex-flow: column; /* Shorthand for ('flex-direction' | 'flex-wrap') */
}
.graph {
  flex-grow: 1;
  border-color: red;
}

<div class="graph-container">
  <h1>Graph Container</h1>
  <div class="graph">Graph</div>
</div>

flex child is growing out of parent

Solution #1 - Without Scroll

Instead of flex: 1 0 auto on the video container, just use flex: 1. This sizes the item based on available space, not the intrinsic height of the content.

Then, because flex items cannot be smaller than the size of their content – min-height: auto is the default – add min-height: 0 to allow the item to shrink to fit inside the container.

.box-grow {
  flex: 1; /* formerly flex: 1 0 auto; */
  background: green;
  padding: 5px;
  margin: 5px;
  min-height: 0; /* new */
}

.my-box {  height: 300px;  width: 600px;  background: red;  padding: 5px;}.content-box {  background: blue;}.col {  display: flex;  flex-direction: column;  justify-content: space-between}.box-shrink {  flex: 0 1 auto;  background: green;  padding: 5px;  margin: 5px;}.box-grow {  flex: 1; /* formerly flex: 1 0 auto; */  background: green;  padding: 5px;  margin: 5px;  min-height: 0; /* new */}video {  max-height: 100%;  max-width: 100%;  margin: auto;  display: block;}

<div class="my-box col">  <div class="box-shrink">    small sized static content  </div>  <div class="content-box box-grow">    <video controls>      <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">    </video>  </div>  <div class="box-shrink">    small sized static content  </div></div>

Set Parent Width equal to Children Total Width using only CSS?

I know this is a bit late, but Hope this will help somebody who is looking for similar solution:

<div class="parent" style="display: inline-flex">
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
        </div>

the trick is to use inline-flex for the parent and inline-table for the child. Everything is dynamic. I make the table scrollable horizontally by adding another grandparent with overflow-x:scroll;:

<div class="grandparent" style="width: 300px; overflow-x: scroll; background: gray">
        <div class="parent" style="display: inline-flex">
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
            <div class="child" style="display: inline-table">some button</div>
        </div>
    </div>

CSS - Shrink a Parent Div to Fit One Child's Width and Constrain the Width of the Other Child