CSS 项目宽度为 50%，但当至少有 1 个项目内容延伸宽度时，将所有项目更改为 100% 宽度

Question

我有一个容器和容器中的物品。我希望这些出现在两列中（这是我通过最小宽度约为 50% 的项目实现的），但如果项目内的内容超出了最小宽度，我希望所有项目都变为 100% 宽度。

这就是我想要实现的目标：

这是我的代码的游乐场示例 - https://jsfiddle.net/meL8jdu6/37/ 在我自己的项目中

.container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.item {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  border: 1px solid black;
  padding: 14px;
  min-width: 45%;
  border-radius: 4px;
  cursor: pointer;
  background-color: white;
  flex-grow: 1;
}

.radio {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid black;
}

<div class="container">
  <label class="item">
    <input class="radio"type="radio" />
    <span>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</span>
  </label>
  <label class="item">
    <input class="radio" type="radio"/>
    <span>text</span>
  </label>
    <label class="item">
    <input class="radio" type="radio"/>
    <span>text</span>
  </label>
    <label class="item">
    <input class="radio" type="radio"/>
    <span>text</span>
  </label>
    <label class="item">
    <input class="radio" type="radio"/>
    <span>text</span>
  </label>
</div>

目前我正在使用 flex 和 flex Growth 来获得类似的东西，但在我的代码中，如果该项目是第 n 个奇数，那么它会扩展到 100% 宽度，并且如果项目内部的内容大于宽度，则并非所有项目增长到全宽。使用网格可能会更好，但与使用 Flex 相比，我无法得到任何接近的结果。

Answer 1

.container {
  display: flex;
  gap: 10px;
  width: 100%;
  flex-wrap: wrap;
}

.item {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  border: 1px solid black;
  padding: 14px;
  flex: 1 1 45%;
  max-width: 100%;
  /* min-width: 45%; */
  border-radius: 4px;
  cursor: pointer;
  background-color: white;
  /*flex-grow: 1;*/
}

.radio {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid black;
}

<div class="container">
  <label class="item">
    <input class="radio"type="radio" />
    <span>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
  </label>
  <label class="item">
    <input class="radio" type="radio"/>
    <span>text</span>
  </label>
    <label class="item">
    <input class="radio" type="radio"/>
    <span>text</span>
  </label>
    <label class="item">
    <input class="radio" type="radio"/>
    <span>text</span>
  </label>
    <label class="item">
    <input class="radio" type="radio"/>
    <span>text</span>
  </label>
</div>

.container {
  display: flex;
  gap: 10px;
  width: 100%;
  flex-wrap: wrap;
}

.item {
  box-sizing: border-box;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  border: 1px solid black;
  padding: 14px;
  flex: 1 1 45%;
  max-width: 100%;
  /* min-width: 45%; */
  border-radius: 4px;
  cursor: pointer;
  background-color: white;
  /*flex-grow: 1;*/
}

.item span {
  width: fit-content;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.radio {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid black;
}

<div class="container">
  <label class="item">
    <input class="radio"type="radio" />
 <span>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</span>
  </label>
  <label class="item">
    <input class="radio" type="radio"/>
    <span>text</span>
  </label>
    <label class="item">
    <input class="radio" type="radio"/>
    <span>text</span>
  </label>
    <label class="item">
    <input class="radio" type="radio"/>
    <span>text</span>
  </label>
    <label class="item">
    <input class="radio" type="radio"/>
    <span>text</span>
  </label>
</div>