html - CSS:百分比宽度与固定的最小宽度相结合导致 div 不适合一行

Question

所以我遇到了这个问题:我一直在研究由 3 个 div(列 - 我们称它们为“A”、“B”和“C”，均为 96% 高)组成的网站的“响应能力” + 页脚。 A 和 C 属于同一类，宽度为 35%。 B 列的宽度为 30%，但我还将其最小宽度设置为 200px。当我缩小浏览器使 B 列为 200px 宽并且不能再变薄并继续缩小时，C 列跳下。我试图让它们填充没有固定的最小宽度和 35% 的最大宽度，同时写 max-width: 35%;不足以实现它。 有什么建议么？ 提前致谢!

Answer 1

html

<div class="container">
  <div class="col colA">A</div>
  <div class="col colB">B</div>
  <div class="col colC">C</div>
</div>

CSS

.container{
  display: flex;
  justify-content: space-between;
}
.col{
  height: 96%;
}
.colA, .colC{
  background-color: blue;
  flex-basis: 35%;
}
.colB{
  min-width: 200px;
}

fiddle :https://jsfiddle.net/4nhvtbpe/