1

I have the following code:

.ai-container,
.ai-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
}
.ai-overlay {
  background-color: black;
  opacity: .2;
  z-index: 1000;
}
.ai-dialog {
  z-index: 1001;
  display: flex;
  flex-direction: column;
  border: 1px solid darkgray;
  border-radius: 5px;
  background-color: white;
  min-width: 300px;
  box-shadow: 0px 0px 15px #444;
  overflow: hidden;
}
.ai-header,
.ai-footer,
.ai-body {
  padding: 10px;
}
.ai-header {
  background-color: hsl(0, 0%, 20%);
  color: white;
  display: flex;
  font-size: 1.1em;
  justify-content: space-between;
}
.ai-footer {
  display: flex;
  background-color: lightgray;
  justify-content: space-between;
}
<div class="ai-container">
  <div class="ai-overlay"></div>
  <div class="ai-dialog">
    <div class="ai-header">
      <span>This is the header</span>
      <span>X</span>
    </div>
    <div class="ai-body">This is the body</div>
    <div class="ai-footer">
      <span>
          <button>Submit</button>
          <button>Lookup</button>
      </span>
      <button>Cancel</button>
    </div>
  </div>
</div>

You can see the result here: http://plnkr.co/edit/5SOxkMV9qQ86m6d2jyT0?p=preview

However, the resulting "dialog" is stretched to fill the whole vertical space.

I would expect this if I had flex-grow: 1, but I don't.

If you add the following to the css:

.ai-container, .ai-overlay {
    ... /*all the previous settings */
    align-items: center;
}

Then the dialog looks like I would expect ... just high enough to fit the content. I assumed that removing align-items would simply move the dialog to the top of the browser window without affecting the height.

What am I missing here?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
RHarris
  • 10,641
  • 13
  • 59
  • 103
  • I tried adding `flex-basis: content` and `flex-grow:0` to all my child classes but nothing changed. – RHarris Dec 28 '16 at 19:58

1 Answers1

1

I assumed that removing align-items would simply move the dialog to the top of the browser window without affecting the height.

You were close. You assumed the default value of align-items was flex-start. Actually, the default value is stretch.

This means that a flex item will always expand to cover the full length of the cross axis of the container, unless the initial setting is overridden.

You can override the default with align-items: flex-start, center, etc.

Here are some more details: How to disable equal height columns in Flexbox?

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701