Exclude Element with Fixed Positioning from Justify-Content in Flex Layout

How To Use Justify-Content: Space-Between With Position: Fixed?

Your footer has position: fixed but it does not have any position set, e.g. top bottom left right. Set those values explicitly:

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

as a shorthand, you can make use of the inset property.

.footer {
  position: fixed;
  inset: auto 0 0 0;
}

This is a similar shorthand to margin, where the 4 values map to top, right, bottom, and left, respectively.

Combining flex with position:fixed

position:fixed, just like position:absolute takes the element out of document flow. It's pretty much like it doesn't exist, as far as its parent is concerned.

This means that it's rendered over the same space as elements that are in the document flow.

The difference between absolute and fixed is that absolute positioned elements are being positioned and sized relative to their closest positioned parent, while fixed ones are positioned and sized relative to their closest viewport.

Which means you want to: use position:fixed on a modal container, which should have the size of the viewport. This container is invisible (transparent) and contains the actual modal. You can use the centering technique of choice, but I suggest using

.modal-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

I strongly advise against using absolute centering methods, such as transform: translate(-50%, -50%), as they fail miserably when the modal results in being taller than the viewport (you lose the ability to access the top).

That said, here's a very basic modal example:

document.querySelector('#showModal').addEventListener('click', function(){  document.querySelector('.modal-container').classList.add('open');})document.querySelector('#hideModal').addEventListener('click', function(e){  e.preventDefault();  document.querySelector('.modal-container').classList.remove('open');})

.modal-container {  position: fixed;  width: 100vw;  height: 100vh;  display: none;  justify-content: center;  align-items: center;}.modal-background {  background-color: rgba(0,0,0,.42);  position: absolute;  height: 100%;  width: 100%;  z-index: -1;}
.modal {  position: relative;  background-color: white;  display: flex;  width: 900px;  min-height: 80vh;  flex-direction: column;}#hideModal {  position: absolute;  top: 1em;  right: 1em;}.open.modal-container {  display: flex;}.modal > * {  flex-grow: 0;  padding: 0 1rem;}.modal-body {  flex-grow: 1;}.modal-head, .modal-footer {  background-color: #eee;}.modal-footer {  padding: 1rem;}@media (max-width: 1200px) {  .modal {     width: 600px;  }}@media (max-width: 767px) {  .modal {     width: 90vw;  }}

<div class="modal-container">  <div class="modal-background"></div>  <div class="modal">    <a id="hideModal" href>Hide modal</a>    <div class="modal-head">            <h1>Modal title</h1>    </div>    <div class="modal-body">      This is the modal body    </div>    <div class="modal-footer">      This is the modal footer    </div>  </div></div>
<button id="showModal">Show modal</button>

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)}

Exclude inner elements from Flexbox?

You can set justify-content: center; in .interview-box-container and few other tweaks such as removing position:absolute from button (see comments in snippet)

Note: there isn't value center for property vertical-align, the closest you find is the middle value

body {  height: 100%;  width: 100%;  margin: 0}
.interview-banner {  width: 100%;  height: 95px;  background-color: #19283B;  position: fixed;  z-index: 1;}
.interview-background {  background-color: #F4F8FB;  min-height: 100vh;  height: 100%;}
.interview-box-container {  display: flex;  justify-content: center; /*align box in center */}
.interview-box {  /*position: relative; */  border: 2px solid black;  max-width: 625px;  min-height: 446px;  display: flex;  flex-direction: row-reverse; /* to make button on left and text on right*/  align-items: center; /* align the text and button vertically*/  justify-content: space-between; /* items are evenly distributed in the line; first item is on the start line, last item on the end line*/  padding: 35px;  background: white;  margin: 100px 0 80px}
.interview-box>button { /* position: absolute;  bottom: 35px;*/  width: 108px;  height: 41px;  font-family: OpenSans-Light;  font-size: 15px;  text-align: center;  color: #FFFFFF;  background-color: #19283B;  border: 1px solid #19283B;  border-radius: 4px;}
.interview-box>p {  color: red;}

<div class="interview-banner"></div><section class="interview-background">  <h2 class="interview-header">Header Text</h2>  <div class="interview-box-container">    <div class="interview-box">      <p>Explanation text</p>      <button>Button Text</button>    </div>  </div></section>

How to use position fixed in flex layout?

If I understand your requirements, you want make the right scroll and the left be fixed. That can be done without the use of fixed position.

I would also personally recommend to not use fixed position, unless it is absolutely necessary, as it can have some unwanted behavior on mobile device, and you kind of loose the benefit non positioned solutions like flexbox offer.

html, body {  margin: 0;}#parent {  display: flex;  height: 100vh;}#left {  flex-grow: 1;  background: blue;}#right {  flex-grow: 5;  background: red;  overflow: auto;}#right div {  height: 300vh;}

<div id="parent">  <div class="child" id ="left">      ABC  </div>  <div class="child" id ="right">    <div>      DEF    </div>  </div></div>

Absolutely positioned flex item is not removed from the normal flow in IE11

It is happening because justify-content: space-between; Distribute items evenly The first item at the start, the last at the end. So just putt <div class="bg">Background</div> between <div class="c1">Content 1</div> and <div class="c2">Content 2</div>
like this

<div class="container">
    <div class="c1">Content 1</div>
    <div class="bg">Background</div>
    <div class="c2">Content 2</div>

</div>

You can see the reason on https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

---

Related Topics