css 使Flex项在Flex容器中水平滚动

xytpbqjk 于 2022-12-30 发布在其他

关注(0)|答案(2)|浏览(221)

我正在尝试实现水平滚动固定宽度的图片，这些图片被 Package 在div中。整个布局被 Package 在flex中，具有左右布局。
然而，我不能保持父框的宽度不溢出，我需要子框水平滚动，并且它的父框包含在flex中。
小提琴链接：https://jsfiddle.net/wn8zd2t6/43/

.dash {
  display:flex;
  width:100%;
}

.left {
  width: 380px;
  height: 100vh;
}

.right {
  flex: 1 1 0%;
  display:flex;
  flex-direction: column;
}

.b {
  border:1px solid black;
}

.ig {
  display:inline-block;
  height:100px;
  width:180px;
  object-fit: cover;
}

.scrollable {
  white-space: nowrap;
  overflow-x:scroll;
}

.box {
  display: inline-block;
}

<div class="dash">
  <div class="left b">
    left
  </div>

  <div class="right b">
    <div>
      top section
    </div>
    <div class="container">
      <!-- necessary -->
      <div>
        scrollable section title
      </div>
    
      <!-- need this to be scroll -->
      <div class="scrollable">
        <div class="box">
                <img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
                <div>
                img caption
                </div>
        
        </div>
        <div class="box">
                <img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
                <div>
                img caption
                </div>
        
        </div>
        <div class="box">
                <img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
                <div>
                img caption
                </div>
        
        </div>
        <div class="box">
                <img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
                <div>
                img caption
                </div>
        
        </div>
        <div class="box">
                <img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
                <div>
                img caption
                </div>
        
        </div>
        <div class="box">
                <img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
                <div>
                img caption
                </div>
        
        </div>
       
      </div>
      
      
    </div>
  </div>
</div>

css

来源：https://stackoverflow.com/questions/74944591/getting-flex-items-to-horizontal-scroll-in-flex-container

2条答案

按热度按时间

u91tlkcl1#

flex-basis: 0%不足以定义图像容器的固定宽度，因此overflow函数没有断点。
使用width: calc(100% - 380px)代替flex: 1 1 0%（380px是另一列的固定宽度）。
这就是你所需要的：

.right {
  /* flex: 1 1 0%; */
  width: calc(100% - 380px); /* new */
}

revised jsfiddle
x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2022-12-30

fv2wmkja2#

我把你的flex代码简化成了下面的代码，我在图片div中添加了边框样式，以使正在发生的事情在视觉上清晰可见。
请务必记住，要将子元素的宽度约束到具有Flex视图的父元素，父Flex容器必须对其宽度进行约束，即使其宽度为：百分之百;
您可以在. right类中看到这一点，该类控制该列的其余子列如何使用它们的flex-grow。

/* Utility */
.border-settings {
  border: 1px solid black;
}

.scrollable {
  display: flex;
  flex-direction: row;
  overflow-x: scroll;
  padding: 10px;
}

/* Container Settings */

.dashboard {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100vh;
}

.left {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.right {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
  max-width: 50%;
}

.container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card {
  margin: 10px;
  padding: 10px;
  border-style: solid;
  border-color: black;
  border-width: 1px;
  border-radius: 10px;
}

/* Element Settings */

img {
  height: 100px;
  width: 180px;
}

<div class="dashboard">

  <div class="left border-settings">
    left Section
  </div>

  <div class="right border-settings">

    <div class="top">
      top section
    </div>

    <div class="container">
      <!-- necessary -->
      <div>
        scrollable section title
      </div>

      <!-- need this to be scroll -->
      <div class="scrollable">

        <div class="card">
          <img src="https://via.placeholder.com/150/FF0000/FFFFFF" />
          <p>img caption</p>
        </div>

        <div class="card">
          <img src="https://via.placeholder.com/150/FF0000/FFFFFF" />
          <p>img caption</p>
        </div>

        <div class="card">
          <img src="https://via.placeholder.com/150/FF0000/FFFFFF" />
          <p>img caption</p>
        </div>

        <div class="card">
          <img src="https://via.placeholder.com/150/FF0000/FFFFFF" />
          <p>img caption</p>
        </div>

        <div class="card">
          <img src="https://via.placeholder.com/150/FF0000/FFFFFF" />
          <p>img caption</p>
        </div>

        <div class="card">
          <img src="https://via.placeholder.com/150/FF0000/FFFFFF" />
          <p>img caption</p>
        </div>

      </div>

    </div>

  </div>

</div>

赞(0）回复(0）举报 2022-12-30

我来回答

css 使Flex项在Flex容器中水平滚动

2条答案

相关问题

热门标签

最新问答