Why does my right hand flex column suddenly drop below a left column?

Question

Why does my right hand flex column suddenly drop below a left column when (fluid) content is added?

I want a fixed width left column and a right hand column containing an image slider (Owl Carousel).

The column layout works fine when empty, but as soon as I add the image slider, the column jumps to 100% width and drops below the fixed column. This is odd as the slider is responsive and shouldn't expand beyond it's container - it's not fixed width.

Please see this codepen: https://codepen.io/nick-gilbert/pen/wORaOP

My basic column layout is very simple:

<div class="row">

   <div class="col search-sidebar">
      left
   </div>

   <div class="col">
      right
  </div>

</div>

CSS:

.search-sidebar: {
  flex: 0 0 260px;
}

Here's an image showing the problem (but better to look at the codepen):

Nandita Sharma · Accepted Answer · 2019-03-22T09:36:29.783

Add flex-nowrap class on the row element.

By default row is flex-wrap:wrap, so when content gets bigger than the width the divs stack up. To avoid them stacking up , use flex-nowrap class of bootstrap.

See the updated codepen

<div class="container">

  <div class="row" style="margin-bottom:40px;">
    <div class="col search-sidebar" style="background-color:aquamarine">left</div>

    <div class="col" style="margin-bottom:20px;background-color:pink">right<br /> (works when empty)
    </div>
  </div>

  <div class="row flex-nowrap">

    <div class="col search-sidebar" style="background-color:aquamarine">
      left<br><br>
    </div>

    <div class="col" style="margin-bottom:20px;background-color:pink">
      right<br />Broken when an Image slider loads. This should stay to the right of the green column.
      <br />

      <!--  Demos -->
      <div id="imageCarousel">
        <div id="imageThumbnails" class="owl-carousel owl-theme">

          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175" />
                        </a>
          </div>

          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175"  />
                        </a>
          </div>
          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175" />
                        </a>
          </div>

          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175"  />
                        </a>
          </div>
          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175" />
                        </a>
          </div>

          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175"  />
                        </a>
          </div>
          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175" />
                        </a>
          </div>

          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175"  />
                        </a>
          </div>
          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175" />
                        </a>
          </div>

          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175"  />
                        </a>
          </div>

        </div>
      </div>
    </div>

  </div>
  <!-- end row -->

</div>

Thanks! The demo works fine now, but unfortunately my real-world problem has a new issue, in that the flex column is still too wide: http://venuefinder.staging.x-rm.com/ (pink column shouldn't be that wide) — NickG, Mar 22 '19 at 09:41
Updated pen showing the problem: https://codepen.io/nick-gilbert/pen/aMPdzW — NickG, Mar 22 '19 at 09:50
Somehow, the flex column is still the width of the entire container, instead of sizing to fit the gap to the right of the green column. Red background is the container. — NickG, Mar 22 '19 at 09:50
Yeah i get whats happening. I am trying to figure out why its happening. Can you try removing the carousel and check if the width issue stil persists — Nandita Sharma, Mar 22 '19 at 09:51
add `min-width:0` to your `col` containing the owl carousel, to see *why* see [this](https://stackoverflow.com/questions/52277368/flexbox-affects-overflow-wrap-behavior/52278099#52278099) or [this](https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size) — kukkuz, Mar 22 '19 at 09:56
Yeah it doesn't... without the carousel it works fine. Something inside the carousel is probably trying to jump to the wrong width. — NickG, Mar 22 '19 at 09:57
I guess what @kukkuz said makes sense. You can go with it. I tried and it worked for me — Nandita Sharma, Mar 22 '19 at 09:59
Sorry - "user error" on my side. It's working now! Thank you both very much! — NickG, Mar 22 '19 at 10:01

Why does my right hand flex column suddenly drop below a left column?

1 Answers1