文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >背景颜色在弹性容器中被切断。

问背景颜色在弹性容器中被切断。
EN

Stack Overflow用户
提问于 2017-08-09 23:48:51
回答 2查看 4.3K关注 0票数 3

我正试图用柔印盒制作一张桌子，这也是绝对定位的。每一行都是一个标准的div和display: flex，每一行中的每一项都是柔性项。请注意，在任何地方都没有设置宽度。

为什么我的背景色这么乱。

​

​

我注意到，如果行中有更多的文本，背景就会扩展得更远，并且位置是根据背景计算的，这很好，只是背景不包括整个行。

尝试显示：inline-flex和background-size: cover无效

https://jsfiddle.net/66f9s2kp/7/

代码语言：javascript
复制
<div style="z-index: 3; position: absolute; top: 50px; left: 50%; transform: translateX(-50%);">
    <div style="display: flex; background-color: rgb(173, 216, 230);">
        <div style="flex: 0 0 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">tesdfxt stuff</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    </div>
    <div style="display: flex; background-color: rgb(173, 216, 100);">
        <div style="flex: 0 0 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">tesdfxt stuff</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    </div>
    <div style="display: flex; background-color: rgb(173, 216, 230);">
        <div style="flex: 0 0 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">sume stufff</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    </div>
</div>


<div style="z-index: 3; position: absolute; top: 150px; left: 50%; transform: translateX(-50%);">
    <div style="display: flex; background-color: rgb(173, 216, 230);">
        <div style="flex: 0 0 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">tesdfxt stuff</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    </div>
    <div style="display: flex; background-color: rgb(173, 216, 100);">
        <div style="flex: 0 0 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">tesdfxt stuff</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    </div>
    <div style="display: flex; background-color: rgb(173, 216, 230);">
        <div style="flex: 0 0 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">so much stuff tipsois asdfasdfasdfasdfasdfasdfthinggyh stuff</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    </div>
</div>

帮帮忙，为了我的理智，

谢谢,

瑞安

html
css
flexbox
css-position
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-08-10 00:14:31

主div容器是绝对定位的。

正如您所提到的：“请注意，任何地方都没有宽度设置。”

在这种情况下，绝对定位的div的宽度将由其内容决定.

​

代码语言：javascript
复制
div[style*="absolute"] {
  border: 2px dashed red;
}
代码语言：javascript
复制
<div style="z-index: 3; position: absolute; top: 50px; left: 50%; transform: translateX(-50%);">
  <div style="display: flex; background-color: rgb(173, 216, 230);">
    <div style="flex: 0 0 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">tesdfxt stuff</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
  </div>
  <div style="display: flex; background-color: rgb(173, 216, 100);">
    <div style="flex: 0 0 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">tesdfxt stuff</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
  </div>
  <div style="display: flex; background-color: rgb(173, 216, 230);">
    <div style="flex: 0 0 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">sume stufff</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
  </div>
</div>


<div style="z-index: 3; position: absolute; top: 150px; left: 50%; transform: translateX(-50%);">
  <div style="display: flex; background-color: rgb(173, 216, 230);">
    <div style="flex: 0 0 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">tesdfxt stuff</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
  </div>
  <div style="display: flex; background-color: rgb(173, 216, 100);">
    <div style="flex: 0 0 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">tesdfxt stuff</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
  </div>
  <div style="display: flex; background-color: rgb(173, 216, 230);">
    <div style="flex: 0 0 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">so much stuff tipsois yh stuff</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
  </div>
</div>

​

修改后的小提琴演示

flex项目正在溢出容器。但是由于背景颜色是在容器上设置的，所以颜色以容器结束。

一种解决方案是在绝对定位的容器上设置宽度：

​

代码语言：javascript
复制
div[style*="absolute"] {
  border: 2px dashed red;
  width: 1000px; /* the sum of flex item widths */
 /* or width: 100% */
 /* or left: 0; right: 0; */
}

* {
  box-sizing: border-box;
}
代码语言：javascript
复制
<div style="z-index: 3; position: absolute; top: 50px; left: 50%; transform: translateX(-50%);">
  <div style="display: flex; background-color: rgb(173, 216, 230);">
    <div style="flex: 0 0 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">tesdfxt stuff</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
  </div>
  <div style="display: flex; background-color: rgb(173, 216, 100);">
    <div style="flex: 0 0 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">tesdfxt stuff</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
  </div>
  <div style="display: flex; background-color: rgb(173, 216, 230);">
    <div style="flex: 0 0 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">sume stufff</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
  </div>
</div>

​

修改后的小提琴演示

另一种解决方案，如果您不想设置一个容器的宽度，是应用背景色的项目，而不是容器。

​

代码语言：javascript
复制
div[style*="absolute"] > div:nth-child(odd) > div {
  background-color: rgb(173, 216, 230) !important;
}

div[style*="absolute"] > div:nth-child(even) > div {
  background-color: rgb(173, 216, 100) !important;
}
代码语言：javascript
复制
<div style="z-index: 3; position: absolute; top: 50px; left: 50%; transform: translateX(-50%);">
  <div style="display: flex; background-color: rgb(173, 216, 230);">
    <div style="flex: 0 0 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">tesdfxt stuff</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
  </div>
  <div style="display: flex; background-color: rgb(173, 216, 100);">
    <div style="flex: 0 0 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">tesdfxt stuff</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
  </div>
  <div style="display: flex; background-color: rgb(173, 216, 230);">
    <div style="flex: 0 0 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">sume stufff</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
  </div>
</div>

​

修改后的小提琴演示

票数 4
EN

Stack Overflow用户

发布于 2017-08-10 00:01:22

使用width而不是flex-basis，父母亲将增长以填充父级，而不是从父级溢出的子级。

​

代码语言：javascript
复制
<div style="z-index: 3; position: absolute; top: 50px; left: 50%; transform: translateX(-50%);">
  <div style="display: flex; background-color: rgb(173, 216, 230);">
    <div style="width: 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">tesdfxt stuff</div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
  </div>
  <div style="display: flex; background-color: rgb(173, 216, 100);">
    <div style="width: 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">tesdfxt stuff</div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
  </div>
  <div style="display: flex; background-color: rgb(173, 216, 230);">
    <div style="width: 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">sume stufff</div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
  </div>
</div>


<div style="z-index: 3; position: absolute; top: 150px; left: 50%; transform: translateX(-50%);">
  <div style="display: flex; background-color: rgb(173, 216, 230);">
    <div style="width: 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">tesdfxt stuff</div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
  </div>
  <div style="display: flex; background-color: rgb(173, 216, 100);">
    <div style="width: 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">tesdfxt stuff</div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
  </div>
  <div style="display: flex; background-color: rgb(173, 216, 230);">
    <div style="width: 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">so much stuff tipsois yh stuff</div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">29</div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">Standard</div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 100px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;"></div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
    <div style="width: 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">0</div>
  </div>
</div>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/45602303

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档