2020年新年大赛！

Question

kitsoRik

Asked:2020-02-03 04:04:51 +0000 UTC2020-02-03 04:04:51 +0000 UTC 2020-02-03 04:04:51 +0000 UTC

弹性拉伸（但仅此而已）

772

有两个组件（A，B）位于具有显示的组件中：flex，A 始终是固定宽度，组件 B 应该填充其他所有内容。但是B也是display:flex，它有一个组件里面有很多方块，我需要这个组件（当没有足够的空间放置方块时）自己开始滚动而不是拉伸父级（水平出现滚动）

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

.A {
  min-width: 280px;
  height: 100%;
  background: green;
}

.B {
  flex-grow: 1;
  height: 100%;
  background: yellow;
  
  display: flex;
}

.wrapper {
  display: flex;
  overflow: auto;
}

.wrapper-item {
  width: 32px;
  height: 32px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
  </head>
  <body>
    <div class="root">
      <div class="A">
        1
      </div>
      <div class="B">
        <div class="wrapper">
            <div class="wrapper-item" style="background: red"></div>
            <div class="wrapper-item" style="background: blue"></div>
            <div class="wrapper-item" style="background: red"></div>
            <div class="wrapper-item" style="background: blue"></div>
            <div class="wrapper-item" style="background: red"></div>
            <div class="wrapper-item" style="background: blue"></div>
            <div class="wrapper-item" style="background: red"></div>
            <div class="wrapper-item" style="background: blue"></div>
            <div class="wrapper-item" style="background: red"></div>
            <div class="wrapper-item" style="background: blue"></div>
            <div class="wrapper-item" style="background: red"></div>
            <div class="wrapper-item" style="background: blue"></div>
            <div class="wrapper-item" style="background: red"></div>
            <div class="wrapper-item" style="background: blue"></div>
            <div class="wrapper-item" style="background: red"></div>
            <div class="wrapper-item" style="background: blue"></div>
            <div class="wrapper-item" style="background: red"></div>
            <div class="wrapper-item" style="background: blue"></div>
            <div class="wrapper-item" style="background: red"></div>
            <div class="wrapper-item" style="background: blue"></div>
            <div class="wrapper-item" style="background: red"></div>
            <div class="wrapper-item" style="background: blue"></div>
            <div class="wrapper-item" style="background: red"></div>
            <div class="wrapper-item" style="background: blue"></div>
            <div class="wrapper-item" style="background: red"></div>
            <div class="wrapper-item" style="background: blue"></div>
            <div class="wrapper-item" style="background: red"></div>
            <div class="wrapper-item" style="background: blue"></div>
            <div class="wrapper-item" style="background: red"></div>
            <div class="wrapper-item" style="background: blue"></div>
            <div class="wrapper-item" style="background: red"></div>
            <div class="wrapper-item" style="background: blue"></div>
            <div class="wrapper-item" style="background: red"></div>
            <div class="wrapper-item" style="background: blue"></div>
            <div class="wrapper-item" style="background: red"></div>
            <div class="wrapper-item" style="background: blue"></div>
        </div>
      </div>
    </div>
  </body>
</html>

在这里：https ://jsfiddle.net/pmz9o08s/8/但是滚动出现在页面上而不是包装上

1 个回答

Voted

user355286 · Answer 1 · 2020-02-03T04:14:16Z

选项1。

:root {
  --a-width: 280px;
}

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

.A {
  min-width: var(--a-width);
  height: 100%;
  background: green;
}

.B {
  flex-grow: 1;
  max-width: calc(100% - var(--a-width));
  background: yellow;
}

.wrapper {
  display: flex;
  overflow: auto;
}

.wrapper-item {
  min-width: 32px;
  height: 32px;
}

<div class="root">
  <div class="A">
    1
  </div>
  <div class="B">
    <div class="wrapper">
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
    </div>
  </div>
</div>

选项 2。

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

.A {
  background: green;
}

.B {
  background: yellow;
  overflow: hidden;
}

.wrapper {
  display: flex;
  overflow: auto;
}

.wrapper-item {
  min-width: 32px;
  height: 32px;
}

<div class="root">
  <div class="A">
    1333333
  </div>
  <div class="B">
    <div class="wrapper">
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
    </div>
  </div>
</div>

弹性拉伸（但仅此而已）

如何从列表中打印最大元素（str 类型）的长度？

如何在 PyQT5 中清除 QFrame 的内容

如何将具有特定字符的字符串拆分为两个不同的列表？

导航栏活动元素

是否可以将文本放入数组中？[关闭]

如何一次用多个分隔符拆分字符串？

如何通过 ClassPath 创建 InputStream？

在一个查询中连接多个表

对列表列表中的所有值求和

如何对齐 string.Format 中的列？

弹性拉伸（但仅此而已）

1 个回答

相关问题