如何控制哪个内部div将控制外部div的宽度[重复]

Question

我有以下代码，并且希望外部 div 的宽度由内部 div 的宽度驱动。相反，它是由文本行的宽度驱动的。我希望文本行换行，外部的最大宽度是内部的宽度。 内部的盒子数量是动态的，所以我不能使用固定宽度（或最小/最大宽度）

.outer {
  padding: 10px;
  background-color: #cdcdcd;
}

.inner {
  padding: 10px;
  background-color: #fff;
  display: flex;
}

.box {
  height: 40px;
  width: 80px;
  background-color: red;
  margin: 10px;
}

<div style="background-color: #fff; padding: 20px; display:flex">
  <div class="outer">
    <div class="inner">
      <div class="box">Box 1</div>
      <div class="box">Box 2</div>
    </div>
    <div>Here is a very long piece of text that is extending the outer too far, when I want the width of outer to be limited by inner, and this sentence to wrap instead</div>
  </div>
</div>

Answer 1

.outer {
  padding: 10px;
  background-color: #cdcdcd;
}

.inner {
  padding: 10px;
  background-color: #fff;
  display: flex;
}

.box {
  height: 40px;
  width: 80px;
  background-color: red;
  margin: 10px;
}

.text {
  width: min-content;
  min-width: 100%;
}

<div style="background-color: #fff; padding: 20px; display:flex">
  <div class="outer">
    <div class="inner">
      <div class="box">Box 1</div>
      <div class="box">Box 2</div>
    </div>
    <div class="text">Here is a very long piece of text that is extending the outer too far, when I want the width of outer to be limited by inner, and this sentence to wrap instead</div>
  </div>
</div>

这个方法效果很好。

min-width

基于父级宽度，因此基本上

min-width: 100%

以及

width

值（即实际的最小宽度）。