What is the best way to allocate a larger size to one part of a flex div?

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

Answer №1

For the first child elements, it's best to keep the width as auto without adding any flex values. The rest of the elements can be set to 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

I trust this meets your expectations:

Utilize the flex-wrap property to wrap the content and specify the desired width in the flex property.

Syntax:

flex: flex-grow | flex-shrink | flex-basis ;

flex-basis - specifies the width value.

If you want to break all words, you can use word-break:break-all;

.inputs {
  display: flex;
}

.content:first-child {
  background:lightblue;
  flex: 0 0 250px;  /* Specify the width as required */
  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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The positioning and floating of two divs are set to fixed without using percentage width, however, the functionality is not

Apologies for my poor English writing :) I am attempting to float two divs side by side in a fixed position, without using percentages. This code works well on most browsers but is not compatible with IE 6. HTML <div class="right"></div> < ...

The sticky table header is being covered by a disabled HTML button, while the active buttons are not visible

I'm currently working on a website using Bootstrap 5 as my framework. The issue I'm facing is that when scrolling down the page and keeping the table header stuck to the top, the disabled button ends up showing over the header. I attempted to us ...

Having trouble with the functionality of a simple jQuery toggle menu on mobile?

I am experiencing an issue with a simple toggle menu that utilizes jQuery's on: tap feature, but it is not functioning as expected: <nav id="mobile-nav"> <ul> <li>Item 1</li> <li>Item 2</li> ...

What is the best way to choose all <pre> tags that have just one line of content?

$('pre:contains("\n")') will target all <pre> elements that have one or more newlines. Is there a way to specifically select <pre> tags with no newline or only one at the end? Any shortcuts available? match <pre>A< ...

Tips on how to showcase list items in a horizontal manner while maintaining consistent spacing and ensuring they are

I have a list of items denoted by the "li" tag, and I am looking for a way to display them horizontally or in a neat format. Below is the HTML code snippet: <!doctype html> <html lang="en" ng-app="app"> <head> ... </head> <bo ...

Trouble accessing HTML file in web browser

I just finished creating a basic webpage called HelloWorld.html using HTML, JavaScript, and CSS. It runs smoothly when I open it from Eclipse IDE and view it through a browser. The functionality of the page is that it contains 5 buttons, each revealing th ...

Is there an easy method for customizing scrollbars?

I'm looking to include an "overflow:scroll" in a navigation div, but the default scrollbar on windows is unattractive. Is there a simple way to customize the scrollbar without having to download extra JavaScript libraries, APIs, and so on? ...

Is there a way for me to modify the position of a cursor graphic?

Similar Question: Custom cursor interaction point - CSS / JQuery I've been experimenting with changing the image of the mouse pointer by using the CSS cursor property ("cursor: url(images/target.png), crosshair;") and have observed that when a us ...

"Learn the process of customizing the border color of a drop-down menu using

Is there a way to add validation to a drop-down menu so that the border color turns red if an option is not selected? $("#MainContent_ddlSuppliers option:selected'").css("border", "1px solid #F78181"); ...

Emojis representing flags displayed on screen

Is there an option to display a flag icon? For example, I am able to write Hello ...

Identify when a mouse hovers within 10 pixels of a div using jQuery

Is it possible to detect when a user hovers over a specific area within a div using JavaScript or jQuery, without adding any additional tags? -------------------------------- -------------------------------- -------------------------------- -------- ...

Need to swiftly modify values of css attributes?

Here is a snippet of the code I am working with: <div></div> <button> Go </button> div { width: 50px; height: 50px; border: 1px solid #ccc; } var bgs = ['red', 'blue', 'yellow', 'green&apo ...

What is the best method for positioning two forms in a vertical arrangement?

I'm looking to integrate a Login form in HTML within my C# project. Here's what I have so far: However, as you can see, the layout is not very aesthetically pleasing. I'm struggling to align the elements in a more visually appealing way. My ...

How can I ensure that the height of my Flexbox always stretches vertically to 100% and fills the available space?

https://i.sstatic.net/j3VOr.png https://codepen.io/leon-yum/pen/GxWqMe?editors=1100 Attempting to replicate an issue encountered in one of our applications. The Sidebar within our app never expands 100% to accommodate the content. The <div class="cont ...

Two divisions inside another "wrapper" division - Adjusting the width

I'm facing an issue with my CSS. I have a container div "container" that contains two other divs - "left" and "main". The width of the container is set to 90% of the body's width, with a margin of 3% auto to center it. .container{ margin:3% auto ...

The Bootstrap Grid Leaves Blank Spaces Unfilled

View the screenshot here Take a look at the image above. I'm struggling to fill the empty space with div elements. I've experimented with display:inline-block and other display properties, but they haven't yielded the desired results. < ...

add a border to an image when it is hovered over

I'm having trouble getting the hover effect to work on my images. I suspect that I may be targeting the CSS hover incorrectly, and there could also be a conflict with the jQuery code that is attached to the images. Here is the link to the fiddle: ht ...

Insert a gap between the two columns to create some breathing room

Does anyone know how to create spacing between columns in an HTML table without affecting the rows? In my table, each column has a border around it: <table> <tr> <td style="padding:0 15px 0 15px;">hello</td> <td style=" ...

Bootstrap grid columns cannot properly handle overflowing content

Utilizing bootstrap version 5.2.3 I'm facing a challenge not with bootstrap itself, but rather my limited comprehension of the flex system and overflow. Displayed below is a scenario where the first div has a fixed height of 100vh. My goal is to kee ...

Ways to center items in a row-oriented collection

When dealing with a horizontal list, the issue arises when the first element is larger than the others. This can lead to a layout that looks like this. Is there a way to vertically align the other elements without changing their size? I am aware of manual ...