html - 我们可以做些什么来使 1 个 flex 元素可调整大小和一个绝对长度？

Question

我想制作一个高度和宽度为 40px 的元素，并在其旁边制作另一个元素，该元素占用父元素宽度的剩余空间。因此，在调整大小后，第二个元素将缩小，而第一个元素将保持不变。

我的想法是为它使用 flexbox 属性，但如果没有，我可以使用其他任何东西来...:)

Answer 1

试试这个:左边的宽度是固定的，你可以根据需要改变它

这是一个fiddle下面是一个工作代码片段

*{
  box-sizing: border-box;
}
body, html{
  height: 100%;
  width: 100%;
  margin: 0;
}
#container{
  display:flex;
  flex-direction:row;
}
#column-2
{
    margin: 0 auto;
    background-color:red;
    border: 0.2em solid black;
    flex-shrink:0;
    flex-grow:1;
}
#column-1
{
    margin: 0 auto;
    width:200px;
    text-align: center;
    background-color: white;
    border: 0.2em solid black;
    flex-shrink:0;
}

<div id="container">
  <div id="column-1">
 content
</div>
<div id="column-2">
test content
</div>
</div>