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

.col-xs-12 can overflow its row when Flexbox is enabled #19965

Closed
Langmans opened this issue May 24, 2016 · 4 comments
Closed

.col-xs-12 can overflow its row when Flexbox is enabled #19965

Langmans opened this issue May 24, 2016 · 4 comments
Labels

Comments

@Langmans
Copy link

Langmans commented May 24, 2016

Imagine the following structure with $enable-flex: true:

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-4">This is supposed to be full width at mobile screens</div>
   </div>
</div>

When on mobile screens, the col expands to the content width(for large images, it overflows the row width!!), while it should expand to the container width (fluid @ 100vw)

I fixed this with some simple scss:

.col-xs-12 {
  @include media-breakpoint-down(xs) {
    flex-grow: 1;
  }
}

I'm not sure how this would play out with higher breakpoints however. Is there any other way to resolve this maybe?

UPDATE: I'm now adding an extra class to the grid rows if there's only .col-xs-12 elements inside that row.

@include media-breakpoint-down(xs) {
  .row.no-flexbox-xs {
    display: block;
  }
}
@cvrebert cvrebert changed the title v4: flexbox and full 12 column width (flex-grow:1)? .col-xs-12 can overflow its row when Flexbox is enabled May 25, 2016
@praveenpuglia
Copy link
Contributor

Do you refer to this behaviour?
http://jsbin.com/latilaqaye/edit?html,css,output

If so, this happens with bootstrap 3.3.6 too without flexbox. Generally an image would overflow if it doesn't have enough space to be fit. That's why we have the class img-responsive so that the image never exceeds the 100% width of it's container, that is the column or force it to grow more than it should.

P.S - Ignore if I didn't get you right.

@twbs-lmvtfy
Copy link

Hi @praveenpuglia!

You appear to have posted a live example (http://jsbin.com/latilaqaye/edit), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

  • W002: <head> is missing X-UA-Compatible <meta> tag that disables old IE compatibility modes

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

@praveenpuglia
Copy link
Contributor

Alright here's an updated one - http://jsbin.com/latilaqaye/edit?html,output

@Langmans
Copy link
Author

Langmans commented Jun 3, 2016

Never mind, what I meant was this: #19831 This can be closed :)

@cvrebert cvrebert closed this as completed Jun 9, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants