CSS：溢出时将flex容器项推到下一行

Question

我有一个包含2个div（.box-1 and .box-1）的伸缩行，它们都包含一些内容。我想要的是它们都留在同一行中，直到.box-1中的内容足够长才能将.box-2推送到下一行。

.box-2

• 应具有桌面屏幕尺寸的固定宽度。
• 应该在平板电脑上为50％的宽度。
• 在手机上应为全角。

现在，从下面的代码片段中可以看到，.box-2中的内容将溢出，但仍位于同一行。 我想要的是当内容溢出时将.box-2推到单独的一行。或.box-2的最小宽度足够宽，可以始终容纳盒子的内容。

注意：我使用col-lg-3类时面临的一个问题是，对于我的.box-2的内容而言，有时会变得太小。

我正在尝试使用CSS网格并为此使用引导程序类。尽量避免自定义样式。下面的.wrappable类是我正在使用的库中的标准，因此无法更改。

.container {
  max-width: 300px; 
}

.wrappable {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
      margin-right: -0.625rem;
    margin-bottom: -0.625rem;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
<div class="wrappable">
  <div class="box-1 wrappable-flex border rounded item-1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, incididunt  ut labore et 
  </div>
  <div class="box-2 col-sm-12 col-md-6 col-lg-3 border rounded text-nowrap">
  some other text I want to put in the same row 
  </div>
</div>
</div>

Answer 1

您可以添加到.box-2 min-width: fit-content;

.container {
  max-width: 300px; 
}

.wrappable {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
      margin-right: -0.625rem;
    margin-bottom: -0.625rem;
}

.box-2 {
  min-width: fit-content;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
<div class="wrappable">
  <div class="box-1 wrappable-flex border rounded item-1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, incididunt  ut labore et 
  </div>
  <div class="box-2 col-sm-12 col-md-6 col-lg-3 border rounded text-nowrap">
  some other text I want to put in the same row 
  </div>
</div>
</div>