Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

iOS Nested Flex item percentage based height appears collapsed #217

Closed
ellm opened this issue Apr 27, 2017 · 1 comment

Comments

@ellm
Copy link

commented Apr 27, 2017

Tested in both iOS Safari and Chrome.

The following markup and styles causes the bug.
Demo here: https://codepen.io/ellm/pen/vmgGPE

<div class="flex-container">
  <div class="flex-child"></div>
  <div class="flex-child"></div>
  <div class="flex-child"></div>
</div>
.flex-container {
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.flex-child {
  border: 1px solid blue;
  display: flex;
  height: 100%; 
}

.flex-child appears collapsed when using percentage based height and .flex-container has it's flex-direction set to column.

My workaround was to not use flex-direction and do the following:

.flex-container {
  border: 1px solid red;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}

.flex-child {
  border: 1px solid blue;
  display: flex;
  height: 100%; 
  width: 100%;
}

Curious if this is a known bug or something new.

@philipwalton

This comment has been minimized.

Copy link
Owner

commented Jun 23, 2017

This is a generic CSS issue, not a Flexbox issue. You can't use %-based height in the vertical direction on an element if its parent doesn't have a definite height defined.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.