A div is used to insert information
<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>
The use of display: flex is intended to format the content nicely, however it distributes the width evenly across all columns. More space is needed for the first div (ProductDesc).
How can I either increase the width of the first div or allow the text in that div to wrap to a second line when it exceeds the width?
I have attempted using overflow-wrap with break-word:
.content {
flex: 1 1 10%;
overflow-wrap: break-word;
}
I have also tried other overflow settings without success.
Additionally, converting these into a table layout is not an option due to data retrieval and mobile compatibility concerns.
Full code snippet:
// Code snippet goes here