Use glide with flexbox

[dodozhang21]

Example project: https://codepen.io/dodozhang21/project/editor/DNxweB

I'm dynamically mout/destroy the glide based on breakpoints.

For breakpoint narrow desktop and higher, I need to add a right rail to the right of glide. So I used flexbox to create the layout. As the right rail width is fixed but the content width should flex.

.gridBContainer {
  @include narrow-desktop {
    display: flex;

    .galleryContainer {
      flex: 100 0 1px;
      margin-right: 20px;
    }

    .right {
      flex: 0 0 #{$right-rail-width};
      background: gray;
    }
  }
}

However it seems glide cannot figure out the width of the .galleryContainer without me explicitly setting a width on the container.

Is this a bug or am I doing something wrong?

[johnrickman]

@dodozhang21 have you had any luck resolving this?

[dodozhang21]

No, just set explicit width on the container.

[embob]

I've had the same issue

[jiulongw]

Had the same issue. Setting explicit width kind of works but missed the flex part. After digging around I found a better solution for anyone who come across this.

The root cause is in flex box, JS code cannot figure out the correct width of a div. To solve this we can use an absolute positioned div to fill the flex div. We also need to use the aspect ratio hack to make the height of flex div correct.

Basically we need two wrapper divs.

<div class="flex-box">
  <div class="fixed-width"></div> <!-- e.g. thumbnail rail goes here -->
  <div class="flex-1-div">
    <div class="aspect-ratio-keeper"> <!-- wrapper 1 -->
      <div class="glide-wrapper"> <!-- wrapper 2 -->
        <div class="glide">...</div> <!-- actual glide goes here -->
      </div>
    </div>
  </div>
</div>

.aspect-ratio-keeper
  position: relative
  height: 0
  padding-top: 56.25% // use same aspect ratio for your slide

.glide-wrapper
  position: absolute
  left: 0
  right: 0
  top: 0
  bottom: 0

[michaelspiss]

This can easily be fixed by setting the flex item's min-width to 0. Example with inline css:

<div style="display: flex">
  <div style="flex: 1"</div>
  <div style="flex: 1; min-width: 0">
    <div class="glide">...</div>
  </div>
</div>

This happens because flex items have a min-width of auto - which messes with the calculations

[bright-cloud-studio]

Hey there, just wanted to come in and comment a big THANK YOU to michaelspiss! We have a somewhat complicated website design and was having tons of issues after using Glide. This fixed our problem with an

menu. Thank you so much for providing a detailed explanation of the issue.