在可滚动容器中将flex父级拉伸为(可变)子级宽度

时间:2018-12-22 12:16:31

标签: css flexbox overflow

这就是我所拥有的(从外到内):

  1. 具有overflow: scroll和固定宽度的父元素。
  2. 宽度可变的元素的垂直列表
  3. 列表项包含display: flexflex-direction: row
  4. 在每个列表项内水平并排放置一个图标和一个标签

我希望列表项采用尽可能多的宽度来容纳其 flexed 子级,因为根父级是可滚动的。我可以使用flex-shrink: 0使图标和标签的宽度达到所需。

问题是:列表项(上面列表中的#3)的宽度限制为可滚动的父容器的宽度,而不是其子容器的宽度。

这很糟糕,因为列表项具有填充和彩色背景。 Here is an example on CodePen 。水平滚动到显示“ Lorem ipsum”的位置,以了解我的意思。

谢谢!

1 个答案:

答案 0 :(得分:1)

只需将list设为inline-block元素,它就不会受到其父元素宽度的限制,并且会扩展为适合最长的元素:

.nav {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 200px;
  background: #f1f1f5;
  overflow: scroll;
}
.list {
  display:inline-block;
}

.item-container {
  padding: 0 16px;
  background: #222225;
  color: #e1e1e8;
}

.item {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.icon {
  flex-shrink: 0;
}

.label {
  flex-shrink: 0;
  white-space: nowrap;
}
<div class="nav"> 
  <div class="list">
    <div class="item-container">
      <div class="item">
        <div class="icon"></div>
        <div class="label">Lorem ipsum dolor sit amet yata yata yata</div>
      </div>
    </div>
    <div class="item-container">
      <div class="item">
        <div class="icon"></div>
        <div class="label">Lorem ipsum</div>
      </div>
    </div>
  </div>
</div>