Handling overflows in flex layout

Question

I am trying to create a layout as below:

This is the code I have to generate the layout:

body {
  margin: 0px;
  padding: 0px;
}

header,
footer {
  background-color: pink;
  height: 30px;
}

main {
  height: calc(100vh - 60px);
  display: flex;
}

#sec1,
#sec3 {
  flex: 0 0 120px;
  background-color: yellow;
}

#sec2 {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
}

.panel {
  position: relative;
  height: 400px;
  width: 700px;
  background-color: grey;
}

<header>Header</header>
<main>
  <section id="sec1">Section1</section>
  <section id="sec2">
    <div class="panel">
      Panel
    </div>
  </section>
  <section id="sec3">Section3</section>
</main>
<footer>Footer</footer>

The problem is that when the screensize reduces, I want the scroll bars to appear in section 2, so that I can scroll and look at the panel. Currently the scroll does not happen at all and only the vertical scroll bar appears. Why is this happening and how do I fix this?

InSync · Accepted Answer · 2023-05-08T06:10:18.370

Flex items shrink by default; since flex-direction is implicitly row, they will shrink their width.

Also, you are setting both justify-content: center and align-items: center, which means half of both of its dimension will be cut. As the vertical and horizontal scrollbars start at the top and left, accordingly, you can only scroll to the bottom and the right part of .panel.

Explanation in non-ASCII art:

justify-content: center
   ◄───────│──────►
   ┌────.panel────┐ ▲
   │              │ │
   │   ┌#sec2─╖   │ │
   │   │      ║   │ │
   │   │      ║   │─── align-items: center
   │   │      ║   │ │
   │   ╘══════╝   │ │
   │              │ │
   └──────────────┘ ▼

To prevent this, add flex-shrink: 0 and use margin: auto:

.panel {
  flex-shrink: 0;
  margin: auto;
}

Try it:

.panel {
  flex-shrink: 0;
  margin: auto;
}

/* Demo only */

body {
  margin: 0px;
  padding: 0px;
}

header,
footer {
  background-color: pink;
  height: 30px;
}

main {
  height: calc(100vh - 60px);
  display: flex;
}

#sec1,
#sec3 {
  flex: 0 0 120px;
  background-color: yellow;
}

#sec2 {
  flex: 1;
  display: flex;
  overflow: auto;
}

.panel {
  position: relative;
  height: 400px;
  width: 700px;
  background-color: grey;
}

<header>Header</header>
<main>
  <section id="sec1">Section1</section>
  <section id="sec2">
    <div class="panel">
      Panel
    </div>
  </section>
  <section id="sec3">Section3</section>
</main>
<footer>Footer</footer>

The diagram seems to be swapped. .panel should be inside #sec2. But the ASCII art suggests otherwise. Can you let me know if the art and the code are in sync? — codingsplash, May 08 '23 at 06:28
@codingsplash That is exactly what happens when `.panel` overflows `#sec2` if you use `justify-content: center` and `align-items: center`. My code prevents that entirely so they demonstrate two different cases. — InSync, May 08 '23 at 07:59

score 0 · Answer 2 · answered May 08 '23 at 05:40

Because, by default flex item are able to shrink. so there with of 700px won't apply exactly in section two. Use flex-shrink:0 to avoid this.

DOC HERE

body {
  margin: 0px;
  padding: 0px;
}

header,
footer {
  background-color: pink;
  height: 30px;
}

main {
  height: calc(100vh - 60px);
  display: flex;
}

#sec1,
#sec3 {
  flex: 0 0 120px;
  background-color: yellow;
}

#sec2 {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
}

.panel {
  position: relative;
  height: 400px;
  width: 700px;
  background-color: grey;
  flex-shrink:0 /* add this */
}

<header>Header</header>
<main>
  <section id="sec1">Section1</section>
  <section id="sec2">
    <div class="panel">
      Panel
    </div>
  </section>
  <section id="sec3">Section3</section>
</main>
<footer>Footer</footer>

Handling overflows in flex layout

2 Answers2