In this flexbox skeleton, I have the .body that is containing 3 rows. The .main row (blue) contains a content that will always overflow. I want to keep scroll in body (like it is now), but I want also that the 3 rows including (.main) grow and fill all the .body(green) section. So my problem, when the body overflow correctly, its children doesn't stretch with it.

You can have the code directly here:

https://jsfiddle.net/garalimedkarim/5khms9Lx/16/

Html

<div >
  <div >
     Header
  </div>

  <div >
    <div ></div>
    <div >
      <div >
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
        <p> Karim </p>
      </div>
    </div>
    <div ></div>
  </div>
</div>

css:

html,
body {
  margin: 0;
  background-color: red;
}

.container {
  background-color: cyan;
  height: 20rem;
  
  display: flex;
    flex-flow: column nowrap;
}

.header {
    flex: 0 0 2rem;
    background-color: bisque;
}

.body {
    background-color: green;
    flex: 1;
    overflow: auto;

    display: flex;
    flex-flow: row nowrap;
}

.left-sidebar {
  background-color: blueviolet;
  flex: 0 0 25%;
}

.main {
  background-color: blue;
  flex: 0 0 50%;
}

.right-sidebar {
  background-color: black;
  flex: 0 0 25%;
}

CodePudding user response：

Flex is kinda funky when you're managing sizing in 2D

Grid is better for that

.body {
    background-color: green;
    flex: 1;
    overflow: auto;
    display: grid;
    grid-template-columns: 0.25fr 0.5fr 0.25fr;
}