Question

HTML

<div class="flex1">
  <div class="flex2">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div class="zero">
      <span>Zero Text</span>
    </div>
  </div>
</div>

CSS

.flex1 {
  display: flex;
  overflow-x: scroll;
  margin: 0 auto;
  outline: 1px solid #000;
  width: 300px;
}

.flex2 {
  display: flex;
  margin-left: auto;
  border: 3px solid #00cc00;
}

.flex2 > div {
  width: 50px;
  height: 100px;
  outline: 1px solid #cc0000;
  text-align: center;  
  flex-shrink: 0;
}

.flex2 > .zero {
  width: 0;
  position: relative;
}

.flex2 > .zero > span {
  position: absolute;
  width: 100px;
  top: 20px;
  transform: translateX(-50%);
}

我的情况是零宽度元素包含一个绝对定位的元素，它比零宽度容器宽，位于另一个带有overflow-x: scroll的容器的边缘上要添加到父级的额外宽度。哇，这是一句话。

外部容器flex1宽300像素，display: flex，overflow-x: scroll。

flex2也是display: flex，并margin-left: auto将flex2与flex内的flex2对齐。

flex2正确对齐其容器的右侧。

问题是flex1的最后一个孩子是零宽度。它包含一个更宽的绝对定位元素。然后，这会导致overflow: hidden显示滚动条。

这是预期和/或有没有办法解决它而不将flex2添加到header？

Flexbox中绝对定位的文本会导致添加额外的宽度

0 个答案: