css - 如何使 flex 元素在两个预定义宽度之间增长和收缩？

Question

我试图让两个 flex 元素收缩和增长，而它们的子 div 元素之一具有预定义的最小和最大宽度。

如果我有太多可用空间，我希望我的两个元素并排显示，而不是元素或内部 div 增长超过最大宽度。

如果我没有足够的可用空间，我希望我的两个内部 div 保持它们的最小宽度并包裹 flex 元素。

我最好的尝试如下:

.bigcontainer {
  display: flex;
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: nowrap;
  flex: 1 1 auto;
}

.a {
  flex: 0 0 auto;
}

.b {
  flex: 0 1 400px;
}

.c {
  flex: 1 0 auto;
}

.sizedContent {
  background-color: lightcoral;
  height: 15px;
  min-width: 200px;
}

<div class="bigcontainer">
  <div class="container">
    <div class="a">
      a
    </div>
    <div class="b">
      <div class="sizedContent">
      </div>
    </div>
    <div class="c">
      c
    </div>
  </div>

  <div class="container">
    <div class="a">
      a
    </div>
    <div class="b">
      <div class="sizedContent">
      </div>
    </div>
    <div class="c">
      c
    </div>
  </div>
</div>

代码笔 pen .

内部 div 正在按照我的意愿增长和收缩。但是，由于 flex 元素也在增长，因此两者之间存在不需要的空白。

有人知道如何实现吗？

Answer 1

要删除 flex 元素之间的空间，请从 display: flex 切换到 display: inline-flex。

revised codepen

.bigcontainer {
  display: inline-flex; /* adjustment */
  flex-wrap: wrap;
}

.container {
  display: flex;
  flex-wrap: nowrap;
  flex: 1 1 auto;
}

.a {
  flex: 0 0 auto;
}

.b {
  flex: 0 1 400px;
}

.c {
  flex: 1 0 auto;
}

.sizedContent {
  background-color: lightcoral;
  height: 15px;
  min-width: 200px;
}

<div class="bigcontainer">
  <div class="container">
    <div class="a">a</div>
    <div class="b">
      <div class="sizedContent"></div>
    </div>
    <div class="c">c</div>
  </div>
  <div class="container">
    <div class="a">a</div>
    <div class="b">
      <div class="sizedContent"></div>
    </div>
    <div class="c">c</div>
  </div>
</div>