我有flexbox盒子列表,盒子的宽度由选择下拉列表和旁边的按钮控制。当我在下面显示错误,并且错误很长时,方框被放大了(在宽度上)。 参见此jsFiddle example。 我该如何制止。我希望包装错误并使其与选择+按钮一样宽。 它必须仍然是灵活的,因此段落没有最大宽度。 而且绝对没有位置。 真正的代码也不是jQuery(AngularJS)。
html:
<div class="container">
<ul class="items">
<li class="item">
<h2>Title 1</h2>
<div>
<select name="item-1-options" id="item-1-options">
<option value="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</option>
<option value="2">Lorem ipsum dolor sit amet</option>
<option value="3">Lorem ipsum dolor</option>
</select>
<button>Select</button>
</div>
<div class="errors">
<p class="error">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultricies.</p>
</div>
</li>
<li class="item">
<h2>Title 1</h2>
<div>
<select name="item-1-options" id="item-1-options">
<option value="1">Lorem ipsum .</option>
<option value="2">Lorem ipsum dolor sit amet</option>
<option value="3">Lorem ipsum dolor</option>
</select>
<button>Select</button>
</div>
<div class="errors">
<p class="error">Lorem ipsum dolor sit amet, consectetur adipiscingLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultricies. Lorem ipsum dolor</p>
</div>
</li>
</ul>
盒子的CSS:
.items {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.item {
display: block;
padding: 1em;
margin: 1em;
border: 1px grey solid;
background: white;
flex-grow: 1;
}
答案 0 :(得分:1)
如果我是正确的话,您只需要将孩子div包裹起来,将其下拉列表和按钮分别包装为孩子1,将错误消息包装为孩子2,将它们包装在带有内嵌块的父div内。将子项2 flex-grow
设置为1,将width
设置为0,然后将ta-da
$("#toggle-errors").on("click", function(){
$(".errors").toggle();
});
.wrapper > div {
border: 1px solid tomato;
}
.errors {
display: flex;
}
.errors p {
flex-grow: 1;
width: 0;
}
.wrapper {
display: inline-block;
}
.items {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.item {
display: block;
padding: 1em;
margin: 1em;
border: 1px grey solid;
background: white;
flex-grow: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle-errors">Toggle Errors</button>
<div class="container">
<ul class="items">
<li class="item">
<h2>Title 1</h2>
<div class="wrapper">
<div>
<select name="item-1-options" id="item-1-options">
<option value="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</option>
<option value="2">Lorem ipsum dolor sit amet</option>
<option value="3">Lorem ipsum dolor</option>
</select>
<button>Select</button>
</div>
<div class="errors">
<p class="error">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultricies.</p>
</div>
</li>
<li class="item">
<h2>Title 1</h2>
<div class="wrapper">
<div>
<select name="item-1-options" id="item-1-options">
<option value="1">Lorem ipsum dolor</option>
<option value="2">Lorem ipsum dolor sit amet</option>
<option value="3">Lorem ipsum dolor</option>
</select>
<button>Select</button>
</div>
<div class="errors">
<p class="error">Lorem ipsum dolor sit amet, consectetur adipiscingLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultricies. Lorem ipsum dolor</p>
</div>
</li>
<li class="item">
<h2>Title 1</h2>
<div>
<select name="item-1-options" id="item-1-options">
<option value="1">Lorem ipsum dolor sit amet, consectetur.</option>
<option value="2">Lorem ipsum dolor sit amet</option>
<option value="3">Lorem ipsum dolor</option>
</select>
<button>Select</button>
</div>
</li>
</ul>
</div>