React - stretch elements vertically in flexbox

In this article, we would like to show you how to stretch elements vertically inside flexbox in React.

Quick solution:

<div style={{display: 'flex', flexDirection: 'column'}}>
  <div style={{flex: 1}}>1</div>
  <div style={{flex: 2}}>2</div>
</div>

Preview:

Practical example

In this example, we use display: 'flex' and flexDirection: 'column' styles for container element to enable vertical flexbox mode. To stretch the elemets we use flex: 1 (flex: 2, flex: 3, etc.) property depending on the height we want to get (the higher the value, the heigher the element).

// ONLINE-RUNNER:browser;

// Note: Uncomment import lines during working with JSX Compiler.
// import React from "react";
// import ReactDOM from "react-dom";

const App = () => {
    return (
        <div style={{
            padding: '5px',
            border: '1px solid black',
            display: 'flex',  // <------------- required
            flexDirection: 'column',  // <----- required
            height: '150px'  // <-------------- optional
        }}>
          <button style={{flex: 1}}>1</button>
          <button style={{flex: 1}}>1</button>
          <button style={{flex: 2}}>2</button>
          <button style={{flex: 3}}>3</button>
        </div>
    );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root);

See also

1. React - stretch elements horizontally in flexbox