代码之家 › 专栏 › 技术社区 › Sasan

CSS-如何防止flexbox中的最后一项宽度增长超过可用空间?

flexbox responsive-design css3 css html

1

Sasan · 技术社区 · 7 年前

flex: 1 1 100%;

到目前为止没有问题。但是在第二个元素有额外内容的页面中,元素的宽度会增长到父元素的宽度(自从我使用 max-width: 100% 然后从flex容器中取出。如果我使用 wrap 然后元素转到下一行,但我不想包装它们。

4 回复 | 直到 7 年前

1

5

Maddoxswe 7 年前

如果使用具有display flex的父元素包装器包装这两个元素,则可以通过flex属性设置两个内部元素的宽度。

在第一个元素上使用flex:0 0 200px将宽度设置为200px,第二个元素将填充剩余空间。

行动中的代码

.parent-element{
  display: flex;
}

.first-element{
  flex: 0 0 200px; 
  border: 1px solid red
}

.second-element{
  display:flex; 
  flex: 1 1 auto;
  border: 1px solid blue
}

.second-element-content{
  flex: 1 1 auto; 
  border: 1px solid black
}

    <div class="parent-element">
    	<div class="first-element">first element</div>
    	<div class="second-element">
    		<div class="second-element-content">content in second column should now fit fine.. 
        	content in second column should now fit fine.. 
        	content in second column should now fit fine.. 
    		  content in second column should now fit fine.. 
        	content in second column should now fit fine..
        	content in second column should now fit fine..
        	content in second column should now fit fine..
            </div>
    	</div>
    <div>

2

1

tao 7 年前

给 flex: auto; 到 灵活项目 ,即:

 flex-grow: 1;
 flex-shrink: 1;
 flex-basis: auto;

和 flex:none; 到 死板的 width 长度单位或百分比)。 flex:none 翻译为:

 flex-grow: 0;
 flex-shrink: 0;
 flex-basis: auto;

看到它工作了吗

.flex {
  display: flex;
}
.flexible {
  flex: auto;
  border: 1px solid blue;
}

.inflexible {
  flex: none;
  width: 200px;
  border: 1px solid red;
}

<div class="flex">
  <div class="flexible">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit ut tortor pretium viverra suspendisse. Mi tempus imperdiet nulla malesuada. Habitasse platea dictumst quisque sagittis purus sit. At urna condimentum mattis pellentesque id nibh tortor id aliquet. Neque aliquam vestibulum morbi blandit cursus risus at ultrices. Pretium quam vulputate dignissim suspendisse in est. Libero nunc consequat interdum varius. Lectus mauris ultrices eros in cursus turpis massa tincidunt. Nisl tincidunt eget nullam non. Turpis massa sed elementum tempus egestas sed sed risus pretium. Ut ornare lectus sit amet est placerat. Bibendum ut tristique et egestas quis ipsum. Augue ut lectus arcu bibendum at. Amet consectetur adipiscing elit duis. Aliquam vestibulum morbi blandit cursus risus at ultrices mi tempus. Nisl purus in mollis nunc sed id semper risus. Ornare aenean euismod elementum nisi quis.
  </div>
  <div class="inflexible"></div>
</div>
<div class="flex">
  <div class="flexible">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit ut tortor pretium viverra suspendisse. Mi tempus imperdiet nulla malesuada. Habitasse platea dictumst quisque sagittis purus sit. At urna condimentum mattis pellentesque id nibh tortor id aliquet. Neque aliquam vestibulum morbi blandit cursus risus at ultrices. Pretium quam vulputate dignissim suspendisse in est. Libero nunc consequat interdum varius. Lectus mauris ultrices eros in cursus turpis massa tincidunt. Nisl tincidunt eget nullam non. Turpis massa sed elementum tempus egestas sed sed risus pretium. Ut ornare lectus sit amet est placerat. Bibendum ut tristique et egestas quis ipsum. Augue ut lectus arcu bibendum at. Amet consectetur adipiscing elit duis. Aliquam vestibulum morbi blandit cursus risus at ultrices mi tempus. Nisl purus in mollis nunc sed id semper risus. Ornare aenean euismod elementum nisi quis.
  </div>
</div>
<div class="flex">
  <div class="flexible"></div>
  <div class="inflexible"><p>Arcu dictum varius duis at consectetur lorem donec massa sapien. Blandit turpis cursus in hac habitasse platea. Malesuada pellentesque elit eget gravida cum sociis. Massa id neque aliquam vestibulum morbi blandit. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices eros. Ac turpis egestas sed tempus urna et. Sed risus ultricies tristique nulla. Velit aliquet sagittis id consectetur. Sit amet luctus venenatis lectus magna. In dictum non consectetur a erat nam at lectus. Risus nullam eget felis eget. Quis lectus nulla at volutpat diam. Ultricies tristique nulla aliquet enim tortor at auctor urna nunc. Ultricies leo integer malesuada nunc vel risus. Vitae auctor eu augue ut lectus arcu. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Pharetra sit amet aliquam id.

<p>Porta non pulvinar neque laoreet suspendisse interdum. Natoque penatibus et magnis dis parturient montes nascetur ridiculus. Ultrices in iaculis nunc sed augue lacus viverra. At imperdiet dui accumsan sit amet. Urna condimentum mattis pellentesque id nibh. Enim diam vulputate ut pharetra sit amet. Vel pharetra vel turpis nunc. Et ligula ullamcorper malesuada proin libero. Proin libero nunc consequat interdum varius sit. Nisi porta lorem mollis aliquam. Volutpat odio facilisis mauris sit amet massa. Arcu odio ut sem nulla pharetra diam. Gravida arcu ac tortor dignissim convallis aenean. Tellus cras adipiscing enim eu turpis. Risus pretium quam vulputate dignissim.</div>
</div>

Documentation here .

:如果未指定 宽度 对于 不灵活 项目,它将根据其内容占用空间,剩余空间将由灵活项目争议(或填充)。在这种情况下,您可能希望项目a min-width

3

0

popshuvit 7 年前

尝试将第二个子对象设置为增长和收缩,将第一个子对象设置为仅收缩(如果需要)。

change.box--固定为: flex: 0 1 300px 如果你想让它收缩的话。您还可以使用值<1使它收缩得更小。

最终,如果紫色div中的内容不能再收缩,它将溢出,因此只需通过以下方式进行说明:a)将其包装或b)收缩第一个div

.wrap {
    display: flex;
    flex-wrap: nowrap;
}

.box {
    flex: 1 1 auto;
    min-height: 200px;
    background-color: rebeccapurple;
}

.box--fixed {
    flex: 0 0 300px;
    // flex: 0 1 300px;
    background-color: #bada55;
}

<div class="wrap">
    <div class="box box--fixed"></div>
    <div class="box">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, dolores animi ab perspiciatis tenetur quis alias illum soluta provident deserunt similique tempore minima consectetur, eaque exercitationem quas nihil nisi voluptates.
    </div>
</div>

4

-1

Nomis 7 年前

max-width: calc(100% - fixed_width_of_first_element px);

更多关于 calc