css float div minwidth没有重叠

Question

好吧，我正在制作一个“简单的 3 列布局”，基本设置是两个固定宽度的列和一个(中心)列，该列可以拉伸(stretch)以填充剩余的宽度。

现在这个简单的布局有一个小的“插件”:我希望为中心列定义一个最小宽度，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;
}

然而，这带来了一个重要问题:当主列达到“最小宽度”(通过在下面的测试链接中拖动分隔线进行测试)时，它开始与左右列重叠。 - 我实际上希望它能拉伸(stretch)页面并引入水平滚动条。

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 简写中的第三个值. 在这种情况下，它是该元素的最小宽度。当它小于该尺寸时，将出现滚动条。

这里有 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 降低了不具有响应式布局的网站的排名。
长话短说，它会让你(或客户)损失大笔金钱。网站越重要，损失越大。更好的用户体验是将左侧边栏和右侧边栏转换为小型设备上可滑动的抽屉。