为什么我的右手 flex 列突然下降到左列下方？

Question

添加（流动）内容后，为什么我的右手 flex 列突然下降到左列下方？

我想要一个固定宽度的左列和一个包含图像滑块的右列 (Owl Carousel)。

列布局在空时可以正常工作，但是一旦我添加图像滑块，列就会跳到 100% 宽度并下降到固定列之下。这很奇怪，因为滑块是响应式的，并且不应扩展超出其容器 - 它不是固定宽度。

请看这个codepen：https://codepen.io/nick-gilbert/pen/wORaOP

我的基本列布局很简单：

<div class="row">

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

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

</div>

CSS：

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

这是显示问题的图像（但最好查看 codepen）：

Answer 1

在行元素上添加flex-nowrap 类。

默认情况下，行是 flex-wrap:wrap，所以当内容大于宽度时，div 会堆叠起来。为避免它们堆积，请使用flex-nowrap 引导类。

查看更新后的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>