Question

我遇到了一些问题，使带有溢流x的flex容器的子级占用其内容的全部宽度。

目标是使内容项使用“ flex：1 0 216px”，当它们不能全部显示在屏幕上时，将显示滚动条，以便用户可以滚动查看其余内容。但是，如您在下面的代码段中所见，“。row” div由于某种原因未占用其父级“ .container”的完整宽度，从而导致背景色和边框未达到内容的边缘。我将容器的背景设为灰色以强调该问题。

这是代码的简化版本。谢谢！

connect()

.container {
  height: 100%;
  background-color: lightgray;
  overflow-x: auto;
}
.row {
  background: lightyellow;
  min-height: 48px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid gray;
  display: flex;
  align-items: center;
  flex-basis: 100%;
  width: 100%;
}

.content {
  flex: 1 0 216px;
}

Answer 1

flex和溢出之间肯定存在一些问题：自动，我只是没有那么深入。如果仅是要为.row元素实现全宽，则不要使用NSString *string = [className load:dict];；您可以设置width: 100%，（因为您已经在.content上设置了min-width: calc(4 * 216px);和flex-shrink: 0，所以我认为.content永远不会小于......）

具有溢出x的Flex容器未占用父容器的全部宽度

1 个答案: