1

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 class="container">
  <div class="header">
     Header
  </div>

  <div class="body">
    <div class="left-sidebar"></div>
    <div class="main">
      <div class="content">
        <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 class="right-sidebar"></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%;
}
Karim Oodrive
  • 61
  • 5
  • To avoid confusion, the `.body` element contains *3 columns*, not *3 rows* (even though the container is in `row` direction). – Michael Benjamin Aug 06 '22 at 21:53
  • Does this answer your question? https://stackoverflow.com/questions/4697578/how-to-make-a-parent-div-grow-with-its-children – MNDevelopments Aug 06 '22 at 21:54
  • `align-items: stretch` is working fine. This property targets *free space* in the container. Your problem involves *overflow space*, which is something else. Here's a reference you may find useful: [Make background color extend into overflow area](https://stackoverflow.com/q/45497031/3597276) – Michael Benjamin Aug 06 '22 at 21:55
  • Does this answer your question? [How to make a parent div grow with its children?](https://stackoverflow.com/questions/4697578/how-to-make-a-parent-div-grow-with-its-children) – MNDevelopments Aug 06 '22 at 21:55

1 Answers1

1

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;
}
Donald Duck
  • 618
  • 2
  • 6