Question

我连续三个div。第一个应该是固定的，第二个应该扩展直到它达到“最大宽度”，第三个div应该占用剩余的空间。它正常工作，直到第三个div具有到达整个宽度的文本。而不是只是包装它的文本开始使第二个div变小。

<div id="container">
    <div id="one">
    sdfsdf
    </div>
    <div id="two">
    fghfgh fghfghd sdf sdf sdf ssdf sdf gh
    </div>
    <div id="three">
    sdfsdfsdfsdfsfd sdf sdf sdf sdf sdfwef sdfwefs df 
    </div>
</div>

#container{
  background-color: red;
  display: flex;
  height: 100px;
  width: 400px;
}

#one{
  background-color: blue;
  flex-grow: 1;
  width:60px;
}
#two{
   background-color: red;
   max-width: 100px
}
#three{
   background-color: green;
   flex-grow: 1;
}

你可以找到一个jsfiddle here。

Answer 1

您可以尝试以下代码：

#container {
  background-color: red;
  display: flex;
  height: 100px;
  width: 400px;
}

#one {
  background-color: blue;
  width:60px;
}

#two {
  background-color: red;
  max-width: 100px
}

#three {
  background-color: green;
  flex: 1;
}

如果您希望div使用flexbox占用剩余空格，则可以使用div flex: 1并为其他div指定宽度。否则，div不会占用剩余的空间。

Answer 2

您可以尝试在第三个 flex-grow: 1 中添加 div ：

#container {
  display: flex;
  height: 100px;
  width: 400px;
}

#one,
#two,
#three {
  flex-grow: 1;
}

#one {
  background-color: blue;
}

#container,
#two {
  background-color: red;
}

#three {
  background-color: green;
}

Answer 3

#one div应该有flex-shrink：0并且没有flex-grow。
#two应该有flex-shrink：0和flex-grow：1
#three应该没有收缩/增长属性

为什么我的flexbox无法正常工作？

3 个答案: