CSS Flexbox: a Centered Child Overflows a Parent with Position Fixed

CSS Flexbox: a centered child overflows a parent with position fixed

Without a markup change you can't, as when using align-items: center, it by design overflow in both directions if the content exceed the flex container.

‘center’

    The flex item’s margin box is centered in the cross axis within
the line. (If the cross size of the     flex line is less than that of the
flex item, it will overflow equally in both directions.)

Also note that auto margins has a special meaning in Flexbox, and it is not a hack, quite the opposite, so in this case, they are the flex based solution to accomplish exactly that.

Update: Here's a later answer of mine, showing a few more solutions, inlcuding the new safe keyword: Flexbox align-items overflow text get cuts off at top

document.getElementById('content').innerHTML = [...Array(100).keys()].join('<br>')

#container {
  position: fixed;
  background: lightblue;
  top: 0; bottom: 0;
  left: 0; right: 0;

  display: flex;
  overflow: auto;
}

#content {
  border: 1px solid green;
  margin: auto;
}

<div id="container">
  <div id="content">
  </div>
</div>

How to center non-fixed child inside fixed parent

You can make the container display :flex, flex-direction:column and use justify-content: center;

#popup {
        height: 60vh;
        width: 60vw;
        /* visibility: hidden; */
        position: fixed;
        left: 20vw;
        top: 20vh;
        border-radius: 8%;
        background-color: rgb(241, 237, 231);
        display :flex;
        flex-direction:column;
        justify-content: center;
    }
    
    #popup form {
        position: static;
        margin: auto;
    }

<div id='popup'>
                <form action='emailform.php' method="POST">
                    <input type="text" name='name' placeholder="Name: "/>
                    <input type="text" name='mail' placeholder="Your Email: "/>
                    <input type="text" name='subject' placeholder="Subject: "/>
                    <textarea name='message' placeholder="Message: "></textarea>
                    <button type='submit' name="submit">Submit</button>
                </form>
     </div>

Can I position an element fixed relative to parent?

Let me provide answers to both possible questions. Note that your existing title (and original post) ask a question different than what you seek in your edit and subsequent comment.

---

To position an element "fixed" relative to a parent element, you want position:absolute on the child element, and any position mode other than the default or static on your parent element.

For example:

#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }

This will position childDiv element 50 pixels left and 20 pixels down relative to parentDiv's position.

---

To position an element "fixed" relative to the window, you want position:fixed, and can use top:, left:, right:, and bottom: to position as you see fit.

For example:

#yourDiv { position:fixed; bottom:40px; right:40px; }

This will position yourDiv fixed relative to the web browser window, 40 pixels from the bottom edge and 40 pixels from the right edge.

How can I have a position: fixed; behaviour for a flexbox sized element?

You can't.

As explained by the CSS2.1 spec:

Absolutely positioned boxes are taken out of the normal flow.

And the Flexible Box Layout spec confirms that:

An absolutely-positioned child of a flex container does not
participate in flex layout. However, it does participate in the
reordering step (see order), which has an effect in their
painting order.

^{(Emphasis mine)}

Center a position:fixed element

If your div has a known width and height, then you basically need to set top and left to 50% to center the left-top corner of the div. You also need to set the margin-top and margin-left to the negative half of the div's height and width to shift the center towards the middle of the div.

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */

Or, if your div has a dynamic/undefined width and/or height, then instead of the margin, set the transform to the negative half of the div's relative width and height.

position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Or, if your div has at least a fixed width and you don't care about centering vertically and old browsers such as IE6/7, then you can instead also add left: 0 and right: 0 to the element having a margin-left and margin-right of auto, so that the fixed positioned element having a fixed width knows where its left and right offsets start. In your case thus:

position: fixed;
width: 500px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;

Again, this works only in IE8+ if you care about IE, and this centers only horizontally not vertically.

Fixed Element is Being Affected by overflow:hidden Parent

https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block :

If the position property is absolute or fixed, the containing block
may also be formed by the edge of the padding box of the nearest
ancestor element that has the following:

A transform or perspective value other than none

Ancestor <div class="shirts-list__colors"> has a transform value of translateY(0).

How to center fixed content in flexbox container in Safari?

Element with position: fixed (or position: absolute) won't behave in the same way in Safari as they do in Chrome/Firefox.

To center a flex item in Safari you need to use transform: translate

Updated codepen

Stack snippet

#container {  width: 100%;  background: yellow;  height: 20px;  position: absolute;  top: 0;  left: 0;  display: flex;  justify-content: center;}
#content {  padding: 0px;  background: linen;  position: fixed;  left: 50%;  transform: translateX(-50%);} 

<div id="container">  <div id="content">THIS CONTENT IS NOT CENTERED IN SAFARI</div></div>

---

Related Topics