CSS Flex：两列具有固定宽度，其余两列具有相对宽度答案

【问题标题】：CSS Flex: Two columns with fixed width and remaining two columns with relative wdithCSS Flex：两列具有固定宽度，其余两列具有相对宽度
【发布时间】：2020-11-30 06:47:44
【问题描述】：

我有一个四列表格，我希望第 3 列和第 4 列具有 200 像素的固定宽度，并且 col1 和 col2 共享剩余宽度的 50%。

我正在尝试这样的事情，但没有得到想要的结果。有人可以帮忙吗？

https://codesandbox.io/s/currying-architecture-lw1t6?file=/src/styles.css

【问题讨论】：

把width: 200px改成min-width: 200px

标签： html css sass flexbox

【解决方案1】：

这会对你有所帮助。

.col3, .col4 {
    min-width: 200px;
}

这是一个修订版（并且规则 max-width 没有 auto 参数）：

.col1,
.col2 {
  width: 50%;
  max-width: 0;
}

.col3,
.col4 {
  min-width: 120px;
  max-width: 200px;
}

【讨论】：

我试过了，但是 col1 和 col2 的宽度不相等（有大约 20 px 的差异）。当我做`显示：网格;网格模板列：1fr 1fr 200px 200px； ` 它工作得很好，但由于兼容性问题我们不愿意使用网格布局。
我再次查看了你的css代码，并没有看到网格帖子。如果你使用你提供的代码和我的解决方案，那么你会得到你想要的结果。我又检查了一遍。
我明白为什么它在沙箱中运行良好，而不是在我的实际实现中。我已经更改了沙箱，以便您更好地了解正在发生的事情。请检查一下 - codesandbox.io/s/optimistic-morning-kj5xu?file=/src/App.js
auto 不是 max-width 的有效值。好的，现在我来看一个例子
检查我的答案

【解决方案2】：

您需要在要应用固定大小的特定框中使用 max-width CSS 属性。

<!DOCTYPE html>
<html>
<head>
    <title>FLEX</title>
    <style type="text/css">
 body{
 font-size: 20px;
 }
 h1{
 font-size: 24px;
 text-transform: uppercase;
 text-align: center;
 }
 .parent{
 display: flex;
 
 text-align: center;
 }
 .parent > * {
 padding: 20px;
 flex: 1 100%;
  }
 .child-1{
    max-width: 200px; //max width
 background: blue;
 }
 .child-2{
 background: green;
 max-width: 200px;  //max width
 }
 .child-3{
 background: yellow;
 }
 .child-4{
 background: pink;
 }


 }

 }
 </style>
</head>
<body>
<h1>FLex box with 2 fixed box</h1>
 <div class="parent">
 <div class="child child-1"><strong>Child 2</strong><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 </div>
 <div class="child child-2">Child 3 <br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</div>

 <div class="child child-3"><strong>Child 4</strong><br> Lorem ipsum
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
 <div class="child child-4">Child 5 <br> Lorem ipsum
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>

 </div>
</body>
</html>

【讨论】：

【解决方案3】：

设置最小宽度：200px；，最大宽度：自动；您要为其设置固定的 200px 大小，对于其他列，您可以按百分比设置宽度。您可以检查并玩弄代码。

【讨论】：