在Flexbox容器CSS内滚动时出现问题

debugcn 发表于 Dev

the_curious_one

我一直在尝试制作一个包含图像的可滚动div。

但这似乎无法正常工作，因为具有溢出属性的div超出了父div的宽度。

代码：

div.displayWrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

div.displayWrapper div.navigationWrapper,
div.adminBox {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

div.displayWrapper div.navigationWrapper div.imagesBox {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 10px 5px;
  flex-wrap: nowrap;
  outline: 1px solid black;
  overflow-x: auto;
  background-color: white;
}

<asp:MultiView id="globalMultiView" runat="server">
  <asp:View id="globalMainView" runat="server">
    <asp:UpdatePanel id="imgUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="true" runat="server">
      <ContentTemplate>
        <asp:MultiView id="imagesMultiView" runat="server">
          <asp:View id="imagesDisplayView" runat="server">
            <div class="displayWrapper">
              <div class="navigationWrapper">
                <div class="imagesBox">
                  <asp:Repeater id="rptDisplaySet" runat="server">
                    <ItemTemplate>
                      <asp:LinkButton id="linkChoice" OnCommand="ManagePreviewCommand" CommandName='<%# (string)Eval("ImageName") %>' runat="server">
                        <img src='<%# ResolveUrl(System.IO.Path.Combine(DataCatalog, (string)Eval("ImageName"))) %>' alt='<%# (string)Eval("ImageName") %>' title='<%# (string)Eval("ImageName") %>' />
                      </asp:LinkButton>
                    </ItemTemplate>
                  </asp:Repeater>
                </div>

我尝试了不同的选项，但是没有任何正常工作。结果调试器工具

坦纳·杜比（Tanner Dolby）

这是一个使用CSS Flexbox创建可水平滚动的图像行的基本示例。从您所包含的图片看来，该行图像溢出了父容器。

由于width您包含的样式表中没有任何明确的声明，因此很难说出到底是什么导致了您的错误，而又没有在JSFiddle或ASP沙箱环境中看到可运行的演示。

.parent {
  border: .1rem solid #f06;
  padding: 1rem;
  margin: 0 auto;
}

.image-row {
  display: flex;
  align-items: center;
  overflow-x: auto;
}

.image-row img {
  border: .15rem solid #333;
  margin: 0 .25rem;
}

<section class="parent">
  <div class="image-row">
    <img src="https://i.ibb.co/KyVGw3J/Screen-Shot-2021-02-15-at-1-32-04-AM.png" alt="tiger" width="200" height="150">
    <img src="https://i.ibb.co/KyVGw3J/Screen-Shot-2021-02-15-at-1-32-04-AM.png" alt="tiger" width="200" height="150">
    <img src="https://i.ibb.co/KyVGw3J/Screen-Shot-2021-02-15-at-1-32-04-AM.png" alt="tiger" width="200" height="150">
    <img src="https://i.ibb.co/KyVGw3J/Screen-Shot-2021-02-15-at-1-32-04-AM.png" alt="tiger" width="200" height="150">
    <img src="https://i.ibb.co/KyVGw3J/Screen-Shot-2021-02-15-at-1-32-04-AM.png" alt="tiger" width="200" height="150">
    <img src="https://i.ibb.co/KyVGw3J/Screen-Shot-2021-02-15-at-1-32-04-AM.png" alt="tiger" width="200" height="150">
    <img src="https://i.ibb.co/KyVGw3J/Screen-Shot-2021-02-15-at-1-32-04-AM.png" alt="tiger" width="200" height="150">
  </div>
</section>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。