css 不重叠的浮动 div 最小宽度

Question

好吧，我正在制作一个 "simple 3 column layout"，基本设置是两个固定宽度的列和一个（中心）列，该列可以拉伸以填充剩余宽度。

现在这个简单的布局有一个小 "addon"：我希望为中心列定义一个最小宽度，css 有一个属性，所以看起来很简单：

.content div {
  border:1px solid #bbb;  
  box-sizing: border-box;
}

.content-left {
  float: left;
  width: 200px;
}

.content-main {
  margin-left: 200px;
  margin-right: 200px;
  min-width: 200px
}

.content-right {
  float: right;
  width: 200px;
}

然而这带来了一个重要的问题：当主栏碰到 "minimum width" 时（在下面的测试 link 中通过拖动分隔线来测试它），它开始与左右重叠柱子。 - 我实际上希望它能拉伸页面并引入水平滚动条。

fiddle to test it

Answer 1

应该这样做：

[layout] {
  display: flex;
}
#left {
  flex: 0 0 180px;
  background-color:#f00;
  margin-right: 20px;
}
#right {
  flex: 1 0 300px;
  background-color:#0ff;
}

<div layout>
    <div id="left">
        left
    </div>
    <div id="right">
        right
    </div>
</div>

有关详细信息，请参阅 flex。在这种情况下，flex-shrink 和 flex-grow 承担了繁重的工作。而flex-wrap的默认值是nowrap.

别忘了prefix。

还要注意 flex-basis 的 300px 值（#right 元素的 flex shorthand 中的第三个值。在本例中，它是最小宽度该元素的大小。当它小于该大小时，将出现滚动条。

这里有 3 列：

[layout] {
  display: flex;
}
[layout] > * {
  padding: 1rem;
}
#left, #right {
  flex: 0 0 180px;
}
#left {
  background-color:#f00;
}
#right {
  background-color:#0ff;
}
#middle {
  flex: 1 0 300px;
  margin: 0 10px;
  border: 1px solid #eee;  
}

<div layout>
    <div id="left">
        left
    </div>
    <div id="middle">
        middle
    </div>
    <div id="right">
        right
    </div>
</div>

旁注： 似乎没有人告诉您您试图实现的水平条是世界其他地方在发明响应式布局时试图避免的。它被认为是非常糟糕的用户体验，Google 降低了不具有响应式布局的网站的排名。
长话短说，它会让你（或客户）损失大笔金钱。网站越重要，损失越大。更好的用户体验是将左侧边栏和右侧边栏转换为小型设备上可滑动的抽屉。

css 不重叠的浮动 div 最小宽度

css floating divs minwidth without overlapping

css

css-float