Flex items inside overflow container display issue

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
Post Reply
Bethrezen
Posts: 445
Joined: September 13th, 2003, 11:56 am

Flex items inside overflow container display issue

Post by Bethrezen »

Hi all

So I’ve run in to a weird problem I don’t understand and I was wondering if someone might be able to provide a little insight, ok so here is the situation.

I have an overflow container that is set to be 100vh, inside the overflow container I have a content container which is taller then the screen size, the problems start when I try to horizontally and vertically centre the content container inside the overflow container by setting

Code: Select all

display: flex; 
align-items: center; 
justify-content: center; 
on the overflow container.

While the horizontal centring is fine since the content container is narrower then the overflow container, the top of the content container gets clipped and becomes inaccessible

Here is a screen shot to demonstrate the problem

https://i.postimg.cc/sXykPMxB/untitled1.png

As you can see the top of the box gets clipped and becomes inaccessible.

now after a bit of searching I came across a post that suggested setting margin:auto; on the content container while this stops the content being clipped it doesn’t fully solve the problem because when the content container is taller then the overflow container there is no spacing between the top and bottom of the content box and the overflow container.

https://i.postimg.cc/k43bTmPR/untitled2.png

As you can see in this screen shot adding margin:auto; stopped the clipping problem but left me with a new problem the top of the content box is right up against the edge of the overflow container when there should be a bit of spacing

So my question is how I add a little spacing to the top and bottom of the content container such that when the content container is taller then the overflow container there will still be a bit of space

Here is a screen shot of the sort of effect I’m trying to achieve.

https://i.postimg.cc/SRYHkCtv/untitled3.png
User avatar
BruceAWittmeier
Posts: 3076
Joined: June 9th, 2008, 10:53 am
Location: Near 37.501685 -80.147967

Re: Flex items inside overflow container display issue

Post by BruceAWittmeier »

I don't quite understand the scroll bar on the outer container if the content is larger than the inner container.

Code: Select all


<!DOCTYPE html>

<html>

<head>

  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Test001</title>
 
  <style type="text/css">

#outer {
  display: flex;
  border: 6px solid #3366ff;
  overflow-y: scroll;
  width: 640px;
  height: 480px;
  background-color: #cccccc;
  padding-top: 12px;
  padding-bottom: 12px;
  align-items: center; 
  margin: auto;
}

#inner {
  border: 6px solid red;
  height: 420px;
  width: 320px;
  overflow-y: auto;
  background-color: #66ffff;
  margin: auto;
}

  </style>
</head>

<body>



<br>

<div id="outer">
<div id="inner">
<p>this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
</p>

</div>
</div>

<br><br>

</body>

</html>
I often take a long windy road to my destination. Upon arrival, I wonder how I missed the shortcut.
Bethrezen
Posts: 445
Joined: September 13th, 2003, 11:56 am

Re: Flex items inside overflow container display issue

Post by Bethrezen »

Hi

Ok maybe I didn’t explain the issue I’m seeing very well so let me try again this time with some screen shots of the actual page I'm working on.

Ok so here is a screen shot of the page I’m working on

https://i.postimg.cc/YqTqN2DK/untitled1.png

now as you can see when I add the following

display: flex;
align-items: center;
justify-content: center;

to the overflow container to both vertically and horizontally centre the content container inside it the top of the content box gets cut off and becomes inaccessible if the box is larger then the overflow container. Now after a bit of searching I found a post somewhere that suggested adding.

margin:auto

To the content container to prevent the clipping and indeed this does in fact work as you can see in this screen shot.

https://i.postimg.cc/HkjvmdTx/untitled2.png

However as you can also see doing this creates a new problem. If the content box is larger then the overflow container then no space is added to the top and bottom of the content box resulting in the top and bottom of the content box being butted right up against the edge of the overflow container, this is incorrect and is not what I should be seeing.

what I should be seeing is something more like this.

https://i.postimg.cc/s2mMJdZY/untitled3.png

Now as you can see as long as the content box is smaller then the overflow container the content box is correctly centred both horizontally and vertically within the overflow container.

Now where I’m running in to difficulty however is trying to create the same effect if the content box is larger then the overflow container.

So what I’m wondering is how can I add the same amount of space all the way around the content container so that regardless of how big or small it might be it will always be horizontally and vertically centred and will always have the same amount of space around it ?

I’ve tried various things but I just don’t see to be able to get this to work correctly. Unfortunately it seems that this is one of those edge cases that no one ever considered during the development of the flex box.

the other thing I'm wondering about is why the clipping even happens in the first place, and why it is that when I try to add top and bottom margin nothing happens and the display isn't adjusted as expected, because in theory this shouldn't even be an issue in the first place because I should just be able to add top and bottom margin to the content box and flex box should adjust the display accordingly.

Clearly there is something a bit screwy going on here the problem however is that I don't really understand flex box that well and don't understand why the problem is happening which makes it difficult to fix, so I was hoping that someone might be able to provide a little insight in to the what it is that's actually causing the problem.
User avatar
BruceAWittmeier
Posts: 3076
Joined: June 9th, 2008, 10:53 am
Location: Near 37.501685 -80.147967

Re: Flex items inside overflow container display issue

Post by BruceAWittmeier »

Box Model:
https://www.w3schools.com/css/css_boxmodel.asp

untitled1.png
Chops off top line even when scrolled to top

untitled2.png
Top visible and adds vertical scroll to outer container

untitled3.png
Top visible, removed vertical scroll, centers inner container when content is less than inner container

You can demo the 3rd image by cutting some of the 'this is a test' out of the <p> </p> paragraph container -- leave 5 or so for demo.

I don't think I can get any closer. Perhaps some with more smarts than me will chime in.

Code: Select all

<!DOCTYPE html>
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Test001</title>

  <style type="text/css">

#outer {
  display: flex;
  border: 6px solid #3366ff;
  width: 640px;
  height: 480px;
  background-color: #cccccc;
  padding: 16px;
  align-items: center;
  overflow-y: auto;
  margin: auto;
}

#inner {
  border: 6px solid red;
  width: 320px;
  align-items: center;
  overflow-y: auto;
  padding:  16px;
  margin: auto;
  background-color: #66ffff;
}

  </style>
</head>
<body>
<br>

<div id="outer">
<div id="inner">
<p>this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
this is a test<br>
</p>

</div>
</div>

<br><br>
</body>
</html>
I often take a long windy road to my destination. Upon arrival, I wonder how I missed the shortcut.
Bethrezen
Posts: 445
Joined: September 13th, 2003, 11:56 am

Re: Flex items inside overflow container display issue

Post by Bethrezen »

I’m not following what’s this supposed to demonstrate exactly because this doesn't look like it does anything different then what I did for the opening post to demonstrate the issue I'm running in to ?

aka a super simple striped down version of the actual page.

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>demo</title>

<style>

html,body
{
margin:0;
padding:0;
}

main
{
height:100vh;
width:100vw;
display:inline-flex;
}

#left
{
width: 328px;
height:100%;
overflow-y:scroll;
}

#right
{
width: calc(100% - 328px);
height:100%;
overflow-y:auto;

display: flex;
justify-content: center;
align-items: center;
}

div.content
{
background-color:pink;
border:2px solid red;
width:544px;
height:700px;
margin:auto;
}

</style>

</head>

<body>

<main>

  <div id="left">
    <div>
      <p>Power</p>
      <input type="radio">
      <label>Solar Power Plant</label>
    </div>
  </div>

  <div id="right">
    <div class="content">
    </div>
  </div>

</main>

</body>
</html>
As you can see while adding margin:auto to the content container stopped the clipping no space is added to the top and bottom of the content container and this is where I get stuck as I can't figure out how to get this to cooperate and add the same amount of space to the top and bottom that there is to the left and right because adding top and bottom margin doesn't work and adding top and bottom padding to the overflow container also doesn't work.
Post Reply