Make Children Divs the Height of Tallest Child

div#filterRow {  min-height: 80px;  display: flex;  border: 2px solid red;}
div#filterRow div.selectHolder {  border: 2px solid blue;  border-right: 0;  padding: 10px;}
div#filterRow div.selectHolder div {  vertical-align: top;}
div#filterRow div.selectHolder:last-child {  border-right: 1px solid lightgray;}
div#filterRow div h1 {  margin: 0;  margin-bottom: 10px;}
div#filterRow div div {  margin-right: 5px;}
div#filterRow div#filters {  width: 800px;}
div#filterRow div#highlight {  width: 300px;}
div#filterRow div#granularity {  width: 400px;}
div.fullwidth {  width: 100%;}

<div class="dispTR" id="filterRow">
  <div class="selectHolder" id="filters">    <h2>Filters longer to make tall</h2>    <p>      Yo-ho-ho bilge topmast Spanish Main lugger starboard grog blossom crow's nest hang the jib spirits chase guns ballast. Letter of Marque come about bucko schooner Jolly Roger Chain Shot boom topsail case shot salmagundi marooned piracy. American Main hornswaggle topgallant reef rigging schooner quarterdeck sutler coffer long boat jury mast Davy Jones' Locker. Sloop pressgang capstan black spot cackle fruit Nelsons folly cable main sheet plunder ye gibbet parrel.    </p>  </div>  <div class="selectHolder" id="highlight">    <h2>Highlight</h2>  </div>  <div class="selectHolder" id="granularity">    <h2>Group</h2>  </div>  </div>

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.

How to make all children in a flex-container to have the same height

To do this you just need to wrap your inner div's in another div and set align-items: center on container element.

.container {  display: flex;  border: 1px solid black;  align-items: center;  width: 500px;  height: 150px;}div > div {  display: flex;}.container div div:not(:first-child) {  background: green;  margin-left: 20px;}.container div div:first-child {  height: 100px;  background: red;  margin-left: 20px;  text-align: center;}

<div class="container">  <div>    <div>      item-1    </div>    <div>      item-2    </div>    <div>      item-3    </div>  </div></div>

<ReactHeight onHeightReady={this.reportCardHeight}>
   <CDiv cardHeight={cardHeight}>
   ...children  
   </CDiv>
</ReactHeight>

const CDiv = styled.div`
    height: ${props => props.cardHeight && `${props.cardHeight}px`};
`;

reportCardHeight = height => {
    const { setCardHeight} = this.props;
    setCardHeight(height);
};

const cardHeightReducer = (state = initialState, action) => {
    switch (action.type) {
        case SET_CARD_HEIGHT:
            return {
                ...state,
                cardHeight: Math.max(
                    state.cardHeight || 0,
                    action.height
                ),
            };
        default:
            return state;
    }
};

.propertydetailbox2 {  display: flex;  border: 1px black solid;}
.propertydetailtextbox {  flex: 1;  border: 1px solid #cccccc;  border-radius: 8px;  margin: 0 auto;  margin-right: 1%;  padding: 20px;  padding-left: 50px;  height: auto;  text-align: left;}
.propertydetailagentbox {  flex: 1;  border: 1px solid #cccccc;  border-radius: 8px;  margin: 0 auto;  margin-left: 1%;  padding: 20px;}

<div class="propertydetailbox2">  <div class="propertydetailtextbox">1<br>2<br>3<br>4<br> </div>  <div class="propertydetailagentbox">1<br>2</div></div>