Css flex overflow issue

Question

I have:

.container {
    display:flex;
    align-items:center
}
.content {
    flex-grow:1
}

in order to align the .content div vertically with css only. The content changes dynamically and that's why I can't use position:absolute; margin-top:50%... styling. Because I never know the exact height of div on each content update.

But in a scenario where .container width changes but height remains, .content overflows .container top because it wraps the text within.

What I'm trying to do is never let .content exceed the top position less than 0. Even the most ideal situation will be preserving the padding-top value of .container and margin-top value of .content. Overflowing bottom will be OK, in fact it'll be my preference.

Any workarounds?

Can you post the html?

Oriol
– Oriol

2015-01-11 00:27:28 +00:00
Commented Jan 11, 2015 at 0:27 — Oriol
– Oriol, Commented Jan 11, 2015 at 0:27

Oriol · Accepted Answer · 2015-01-11 00:38:24Z

4

You can make .container height flexible: use min-height instead of height.

.container {
  display: flex;
  align-items:center;
  min-height: 75px;
  border: 3px solid blue;
}
.content {
  height: 150px;
  flex-grow: 1;
  border: 3px solid red;
  resize: vertical;
  overflow: auto;
}

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

Another possibility is using overflow: auto. However, instead of centering using align-items:center, use margin: auto 0.

.container {
  display: flex;
  height: 75px;
  border: 3px solid blue;
  overflow: auto;
  resize: vertical;
}
.content {
  height: 150px;
  flex-grow: 1;
  margin: auto 0;
  border: 3px solid red;
}

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

answered Jan 11, 2015 at 0:38

Oriol

291k71 gold badges459 silver badges535 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Css flex overflow issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related