csssassflexboxless

What can we do get a layout like this using just flex?

I want a layout like this, how can I write the CSS code?

enter image description here

My HTML (I have moved my CSS in styles in HTML):

<div class="container" style={{ display: "flex", flexWrap: "wrap" }}>
    <div class="orange" style={{ flex: 1 }}>
      <div id="chart" />
    </div>
    <div class="yellow" style={{ flex: 1 }}>
      <LineChart
        width={600}
        height={300}
        data={this.state.data2}
        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
      >
        <XAxis dataKey="name" />
        <YAxis />
        <CartesianGrid strokeDasharray="3 3" />
        <Tooltip />
        <Legend />
        <Line
          type="monotone"
          dataKey="pv"
          stroke="#8884d8"
          activeDot={{ r: 8 }}
        />
        <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
      </LineChart>
    </div>
  </div>
Solution

  • Flex comes handy to properly position and size the sidebar and content elements, as in the example below.

    No need for any fixed pixel width nor using flex for header and footer which are simple block elements.

    .header { background: red; }
.sidebar { background: orange; }
.content { background: yellow; }
.footer { background: green; }

.container {
    display: flex;
}

.sidebar {
    flex: 1;
}

.content {
    flex: 3;
}
    <div class="header">header</div>
<div class="container">
    <div class="sidebar">sidebar</div>
    <div class="content">content</div>
</div>
<div class="footer">footer</div>