如何为Flex div的一部分提供更大的尺寸?

Question

>我有一个插入信息的div

<div class="inputs">
<div class="content">@Html.TextBoxFor(model => invoices.ProductDesc, new { disabled = "disabled", @readonly = "readonly" })</div>
<div class="content">@Html.TextBoxFor(model => invoices.ProductSKU, new { disabled = "disabled", @readonly = "readonly" })</div>
<div class="content">@Html.TextBoxFor(model => invoices.ProductQuantity, new { disabled = "disabled", @readonly = "readonly" })</div>
<div class="content">@Html.TextBoxFor(model => invoices.ProductUnit, new { disabled = "disabled", @readonly = "readonly" })</div>
<div class="content">@Html.TextBoxFor(model => invoices.IsMilled, new { disabled = "disabled", @readonly = "readonly" })</div>
<div class="content">@Html.TextBoxFor(model => invoices.ProductUnitPrice, new { disabled = "disabled", @readonly = "readonly" })</div>
</div>

我使用 display：flex 来很好地显示它们，但是 Display Flex 似乎只能将每列的宽度均匀地分布到相同的大小。我需要更多空间来放置我的第一个div(产品描述(

我怎样才能给第一个div更大的宽度，或者当它超过div的宽度时，将信息包装在该产品DESCdiv中以转到第二行？

我试过断言

.content {
flex: 1 1 10%;
overflow-wrap: break-word;
}

我也尝试了溢出的其他各种设置，但似乎没有一个能给出我想要的

也不，我不能将这些更改为表格。 IM假设是因为数据的提取方式和移动目的

完整的代码片段

<div style="clear:both;"></div>
<div class="inputs">
<div class="title">@Html.Label("Description:ffffffffffffffffffffffffffffffffffffffffffffffffffffffff ")</div>
<div class="title">@Html.Label("SKU: ")</div>
<div class="title">@Html.Label("QTY: ")</div>
<div class="title">@Html.Label("Unit: ")</div>
<div class="title">@Html.Label("Milled: ")</div>
<div class="title">@Html.Label("Unit Price: ")</div>
</div>

if (Model.InvoicesDetails.Count > 0)
{
var invoices = Model.InvoicesDetails[1];
for (int i = 0; i < Model.InvoicesDetails.Count; i++)
{
<div class="inputs">
<div class="content">@Html.TextBoxFor(model => invoices.ProductDesc, new { disabled = "disabled", @readonly = "readonly" })</div>
<div class="content">@Html.TextBoxFor(model => invoices.ProductSKU, new { disabled = "disabled", @readonly = "readonly" })</div>
<div class="content">@Html.TextBoxFor(model => invoices.ProductQuantity, new { disabled = "disabled", @readonly = "readonly" })</div>
<div class="content">@Html.TextBoxFor(model => invoices.ProductUnit, new { disabled = "disabled", @readonly = "readonly" })</div>
<div class="content">@Html.TextBoxFor(model => invoices.IsMilled, new { disabled = "disabled", @readonly = "readonly" })</div>
<div class="content">@Html.TextBoxFor(model => invoices.ProductUnitPrice, new { disabled = "disabled", @readonly = "readonly" })</div>
</div>


/*<div class="inputs">
@/*Html.Label("ProductLinePrice: ")
@/*Html.TextBoxFor(model => invoices.ProductLinePrice, new { disabled = "disabled", @readonly = "readonly" })
</div>*/
}
}
else
{
<div style="clear:both;"></div>
@Html.Label("No Records Available for the year selected.")
}
@*</div>*@
}
</div>

Answer 1

只需将宽度保留为第一个子元素的auto(不要应用任何 flex 值(。其他人可以有flex:1.

.inputs {
display: flex;
flex-wrap: wrap;
margin-bottom: 1em;
}
.content {
border: 1px solid grey;
padding: .25em;
}
.content:not(:first-child) {
flex: 1;
}

<div class="inputs">
<div class="content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores, aliquid. Lorem ipsum dolor sit emet</div>
<div class="content">Lorem ipsum dolor sit amet.</div>
<div class="content">Lorem ipsum dolor sit amet.</div>
<div class="content">Lorem ipsum dolor sit amet.</div>
<div class="content">Lorem ipsum </div>
<div class="content">Lorem </div>
</div>

Answer 2

我希望这是你所期待的：

使用flex-wrap包装内容，还可以在 flex 属性中指定所需的宽度。

语法：flex: flex-grow | flex-shrink | flex-basis ;

弹性基础 - 宽度值。

如果你想打破所有单词，你可以使用word-break:break-all;

.inputs {
display: flex;
}
.content:first-child {
background:lightblue;
flex: 0 0 250px;  /* u can specify the width based on u r requirement*/
flex-wrap:wrap;
}
.content {
background: red;
flex-grow: 1;
}

<div class="inputs">
<div class="content">1 content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content     </div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
</div>