React-Bootstrap <Row> incorrect height

Question

I am trying to create a two column layout, with the left column a fixed height, and the right column containing another Grid with multiple rows.

However, the first row in the second column is always the height of the left column.

Here's the output:

Here is my code:

class App extends Component {
  render() {
    return (
      <div>
        <Grid fluid >
          <Row>
            <Col xs={2} style={{ padding: '0px', backgroundColor: 'lightblue', height: '200px' }}>
        Column 1 <br/>I am a 200 px tall column</Col>
            <Col xsOffset={2}>
              <Grid>
                <Row style={{backgroundColor: 'red'}}>
                 Column 2 <br/> Why am I so tall???
                </Row>
                <Row style={{backgroundColor: 'green'}}>
                 I am too far down!
                </Row>
                <Row style={{backgroundColor: 'lightgray'}}>
                 Me, too!
                </Row>
              </Grid>
            </Col>
          </Row>
        </Grid>
      </div>
    );
  }
}

And a fiddle: https://jsfiddle.net/TimoF/dwLhb1fz/

Answer 1

Replace xsOffset={2} with xs={10}

Why was it happening?

According to Bootstrap Grid System, adjacent <div> with pseudo class .row::before is having display:table,by default.

Had to dive deep into Bootstrap CSS ;)

Hence it will force adjacent <div> to be of equal height. Check this

In your case, it's not necessary to give offset, and it's more convenient to replace xsOffset={2} with xs={10}.

Hence it will work fine as it's standard Bootstrap's way.

var { Grid, Row, Col } = ReactBootstrap

class App extends React.Component {
  render() {
    return (
        <Grid fluid >
          <Row>
            <Col xs={2} style={{ backgroundColor: 'lightblue', height: '200px' }}>
            Column 1 <br/>I am a 200 px tall column</Col>
            <Col xs={10}>
             <Row>
              <Grid>
                <Row style={{backgroundColor: 'red',height:'auto'}}>
                  Column 2 <br/> Why am I so tall???
                </Row>
                <Row style={{backgroundColor: 'green'}}>
                  I am too far down!
                </Row>
                <Row style={{backgroundColor: 'lightgray'}}>
                  Me, too!
                </Row>
              </Grid>
             </Row>
            </Col>
          </Row>
        </Grid>
    )
  }
}

ReactDOM.render(
  <App/>,
  document.getElementById('container')
);

<script src="https://unpkg.com/react@16.2.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.2.0/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.1/react-bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

Check this Fiddle