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/

Solution

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/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/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

Comments

[TimF]

This works! Thanks! What was the problem with my way? My thinking was that I'd have a xs=2 column on the left, and a bunch of stuff in a column that was offset right by 2. Why did that cause the rows to be the wrong size?

[Dhaval Jardosh]

Please check the reason

[TimF]

Thank you for the explanation!