html - 当元素处于特定宽度时包装元素

Question

我正在尝试实现一个 CSS“卡片模板”，其中一个 2 项 flexbox 需要在第一个元素处于特定宽度时包装最后一个元素。使事情复杂化的是最后一项的宽度可以是可变的。当您查看下面的 JFiddle 时，这会更有意义。绿色框是第一项，红色框是最后一项。当用户将窗口大小时更改为绿色框达到 300px 宽度时，红色框需要换行到下一行。我尝试将 flex-wrap 与 min-width 结合使用，但这并不能解决问题。感谢您的帮助。

https://jsfiddle.net/burtonrhodes/tu4wgc3m/41/

下面是卡片模板的例子

<div class="afs-card">

  <div class="afs-card-checkbox">
    <input type="checkbox" />
  </div>

  <div class="afs-card-icon">
    X
  </div>

  <!-- this div should expand to fill the space -->
  <div class="afs-card-info">

    <!-- this item should exapnd to fill the space -->
    <div class="afs-card-content">
      <div class="afs-card-description">
        This is the content for the card. When adjusting the screen, if this box is
        <=3 00px;, then the red box should wrap to the next line. </div>
          <div class="afs-card-sub-description">
            This is a sub text for the card
          </div>
      </div>

      <!-- this div will be a certain width based off child width properties 
            and should go to next line if afs-content's width is <= 300px -->
      <div class="afs-card-details">
        <!-- no wrapping of these items should occur -->
        <div style="width: 80px">
          10/15/2005
        </div>
        <div style="width: 20px">
          X
        </div>
        <div style="width: 70px">
          More
        </div>
      </div>

    </div>

    <div class="afs-card-menu">
      ...
    </div>

    <div class="afs-card-drag-handle">
      ==
    </div>
  </div>

Answer 1

您可以使用 flex-basis 和 flex-grow 实现这一点。用这个更新你的CSS:

// Your wrapper
.afs-card-info {
  display: flex;
  width: 100%;
  border: 1px solid;
  flex-wrap: wrap;
}
// Your left container
.afs-card-content {
  padding: 1px 10px;
  border: green 2px solid;
  flex-basis: 300px;
  flex-grow: 1;
}