使用水平滚动的一个元素的 CSS 弹性行

Question

我想创建一个包含 2 个子元素的 Flex 行。 左和右在哪里：

• 右侧侧将包含几个堆叠的按钮，其宽度不会改变
左
• 侧将具有用户可以添加和删除的动态数量的“框”。 （“按钮”的目的是添加/删除框） 我希望
left
• 元素在其内容占用的空间大于行中剩余空间的情况下水平滚动，并在用户调整浏览器/窗口大小时调整大小。 左
框本身无法调整大小，它们需要保持特定宽度
• （即：flex-shrink：0） 我已经为这种情况设置了一个简单的测试，但我无法让它工作：

      <div class="featureWrap">
        ROW 1
        <div class="featureRow">
          <div class="rowLeft">
            <div class="boxLeft">box 1</div>
            <div class="boxLeft">box 2</div>
            <div class="boxLeft">box 3</div>
          </div>
          <div class="rowRight">
            <div class="boxRight">button 1</div>
            <div class="boxRight">button 2</div>
          </div>
        </div>
        ROW 2 - overflows remaining space
        <div class="featureRow">
          <div class="rowLeft">
            <div class="boxLeft">box 1</div>
            <div class="boxLeft">box 2</div>
            <div class="boxLeft">box 3</div>
            <div class="boxLeft">box 4</div>
            <div class="boxLeft">box 5</div>
            <div class="boxLeft">box 6</div>
            <div class="boxLeft">box 7</div>
            <div class="boxLeft">box 8</div>
            <div class="boxLeft">box 9</div>
          </div>
          <div class="rowRight">
            <div class="boxRight">button 1</div>
            <div class="boxRight">button 2</div>
          </div>
        </div>
      </div>

使用以下CSS

.featureWrap {
  display: flex;
  flex-direction: column;
  margin: 30px;
}

.featureRow {
  display: flex;
  flex-direction: row;
  padding: 5px;
  border: solid 1px rgb(236, 158, 40);
  margin: 10px 0;
}

.rowLeft {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  padding: 5px;
  border: solid 1px rgb(83, 176, 230);
  overflow-x: auto;
}

.rowRight {
  display: flex;
  flex-direction: column;
  padding: 5px;
  border: solid 1px rgb(51, 212, 64);
}

.boxLeft {
  width: 100px;
  height: 20px;
  background-color: rgb(152, 215, 226);
  border: solid 1px #555;
}

.boxRight {
  width: 100px;
  height: 20px;
  background-color: greenyellow;
  border: solid 1px #555;
}

这里是对工作示例的堆栈闪电战

。

有人可以帮我弄清楚如何让左侧水平滚动，即使页面大小调整

这是您想要实现的设计目标吗？

Answer 1

使用

overflow: auto

和

display: flex

 上的 

.left

 让元素滚动。我还在悬停时扩展了 

.right

 的宽度，因此更明显的是 

.left

 元素仅在计算 

.right

 元素后消耗剩余空间。

这是由于 

flex-grow: 1

的

.left

 和 

flex-shrink: 0

 的 

.right

 造成的。

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.flex-wrap {
  display: flex;
}

.left, .right {
  border: 5px solid;
  display: flex;
}

.left {
  flex-grow: 1;
  border-color: hotpink;
  overflow: auto;
}

.right {
  flex-direction: column;
  justify-content: space-evenly;
  width: 30vw;
  border-color: salmon;
  transition: width 0.2s;
  flex-shrink: 0;
}

.right:hover {
  width: 50vw;
}

.box {
  height: 30vw;
  aspect-ratio: 1;
  border: 5px solid;
  display: inline-block;
}

button {
  padding: 1rem;
  font-size: 18pt;
}

<div class="flex-wrap">
  <div class="left">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="right">
    <button>does</button>
    <button>nothing</button>
  </div>
</div>