How to make the second div start on a new row when the first div exceeds its space in CSS

I am trying to figure out how to have two divs side by side with equal width. However, if the text in the first div wraps onto a second line, I want the second div to move below the first one and both divs should double in width. Can CSS handle this type of layout?

I attempted using flexboxes but I am not sure what the next steps are.

#container {
  display: flex;
  width: 500px;
  border: 1px solid black;
}

.cell {
  flex: 1;
}
<div id="container">
  <div class="cell" style="background-color:pink;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
  </div>
  <div class="cell" style="background-color:lightblue;">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco
  </div>
</div>

htmlcssflexboxalignmentword-wrap

Answer №1

To achieve the desired layout, set flex-wrap: wrap; on the container and apply flex-grow: 1; to the items. Make sure to view the snippet in full screen and adjust the browser width for optimal results.

#container {
  display: flex;
  border: 1px solid black;
  flex-wrap: wrap;
}

.cell {
  flex-grow:1;
}
<div id="container">
  <div class="cell" style="background-color:pink;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
  </div>
  <div class="cell" style="background-color:lightblue;">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco
  </div>
</div>

Answer №2

I finally cracked the code. To make this work, both divs need to have a minimum width of 50%, and the last div should also have flex: 1. The parent div must include flex-wrap: wrap.

#container {
    display: flex;
    flex-wrap: wrap;
    width: 500px;
    border: 1px solid black;
}
#cell1 {
    background-color: pink;
    min-width: 50%;
}
#cell2 {
    background-color: lightblue;
    min-width: 50%;
    flex: 1;
}
<div id="container">
    <div id="cell1">
        Lorem ipsum dods Ut eniasdfasdf
    </div>
    <div id="cell2">
        Ut enim ad minim veniam, quis nostrud exercitation ullamco
    </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

"Trouble with jQuery: Selecting an image to change isn't

Can someone help me figure out why my simple image change on a dropdown isn't working correctly? You can find the code on this Jsfiddle. Thank you for any assistance! $("#display_avatar").change(function(){ $("img[name=preview]").attr("src", $( ...

jqueryhtmlcss

Is it possible to animate captions and slides individually within a Bootstrap 5 carousel?

Beginner coder here, testing my skills with a self-assigned task. I've created a carousel using Bootstrap 5 with three slides, each containing two lines of captions. As the slides transition, the captions move in opposite directions—up and down. Ho ...

javascriptcsshttpcarouselbootstrap-5

What strategies can be implemented to increase the number of backlinks?

<script type="text/javascript"> $(document).ready(function() { var linkas = $("#button").attr("value"); $('#button').click(function(){ $.get(linkas, function(data){ $(' ...

jquerybuttonhtmlhyperlink

Button component in React JS fails to appear on iPhones

After building a website using reactjs, I encountered an issue where the landing page's begin button is not displaying correctly on iPhones. The website works fine on all other devices, but on iPhones, the button is barely visible - with only a faint ...

javascripthtmlcssreactjs

Transitioning smoothly from mobile to tablet views with the sidebar activated in Semantic-UI

My HTML includes a pointing menu when the screen width exceeds 630px. Below 630px, it switches to a sidebar with a menu button: <nav class="ui inverted sidebar menu vertical slide out" id="m_menu"> <a href="index.php" ...

jqueryhtmlcssresponsive-designsemantic-ui

Interested in retrieving the dynamically changing value of LocalStorage

Hopefully I can articulate my issue clearly. I am implementing a feature where CSS themes change upon button clicks. When a specific theme button is clicked, the corresponding classname is saved to LocalStorage. However, since the key and value in LocalSt ...

javascriptjqueryhtmlcsslocal-storage

Guide to create a sliding menu transition from the viewport to the header

I am just starting to learn jQuery and I want to create a menu similar to the one on this website Specifically, I would like the menu to slide down from the viewport to the header, as shown in the template in the link. I have searched through the jQuery ...

javascriptjqueryhtmlcss

Changing the Div Class in Master page from a Child page is a straightforward process that involves modifying

I am trying to dynamically change the style of a div element in the master page from my child page. This is the code I am using: protected void ShowMsgText(int MsgID) { HtmlGenericControl MsgInner; MsgInner = ((HtmlGenericControl) ...

asp.netcssmaster-pages

Tips on customizing styles for Material UI components using CSS override techniques

Currently, I am tackling a project that requires the use of Material UI components. To simplify things, let's focus on a basic functional component that includes two Material UI elements: a Button and a Text Field. import React from 'react'; ...

cssreactjsmaterial-ui

Apply a specific style to the initial element generated by *ngFor

My current method for displaying a certain number of * characters is utilizing the code snippet below: <div *ngFor="let line of lines; let i=index">*</div> I am interested in applying a margin only to the first element. The margin value sh ...

htmlcssangularngfor

Fixed Sidebar and Dynamic main content with top and bottom sections

Hello, I've been encountering an issue with coding the layout of my website. I want the sidebar to remain fixed regardless of screen size, while also making sure that the content area adjusts fluidly. The header is staying at the top as desired, but I ...

htmlcss

The vertical alignment of the wrapper div does not support multiple lines of text

I am having trouble achieving vertical alignment (middle) for a div with 2 lines of text. I can do it with one line, but not two. I want one of the lines to be formatted like a h2 heading, and the other like a regular paragraph. I understand that I could s ...

htmlcss

The onclick event for a Bootstrap .btn-group checkbox functions correctly in JSFiddle, but encounters issues when tested

The toggle button group in the form below utilizes Bootstrap and checkboxes. I am looking to track click events on the checkbox inputs. <html> <head> <title>Example: Bootstrap toggle button group</title> <meta charset="UTF-8 ...

javascriptjquerycsstwitter-bootstrapbootstrap-4

Minimizing the use of line breaks in HTML to enhance visual design characteristics

While working with Bootstrap and HTML to construct a website, I have frequently resorted to using line breaks in the code for design purposes. However, I believe there must be a more professional approach to achieve the desired layout. For instance, on ...

htmltwitter-bootstrap

How can I keep a button element in place when resizing the window using CSS?

I'm currently experiencing an issue with my navbar where a button escapes from it when I resize the screen. Which CSS property should I modify to ensure that the button remains inside the navbar and doesn't escape? Here is a JFiddle link demonst ...

css

Sending data from Angular to the DOM

Is there a way to dynamically pass a property to an HTML tag using Angular? <div class="my-class" data-start="10"> I am trying to figure out how to pass the value of data-start dynamically. This is for an Angular 5 application. Any advice would be ...

htmlangularangular-directive

The side menu in Bootstrap dropdown experiences a one-time functionality

When navigating through a responsive top menu with Bootstrap, everything works seamlessly - from toggling the menu to dropdown functionality. However, I encountered an issue with the side menu as nav-pills used to select tab-panes. <div class="containe ...

javascriptjqueryhtmlcsstwitter-bootstrap

Get the page downloaded before displaying or animating the content

Is there a method to make a browser pause and wait for all the content of a page to finish downloading before displaying anything? My webpage has several CSS3 animations, but when it is first loaded, the animations appear choppy and distorted because the ...

javascriptjqueryhtmlanimationbrowser

Adjust the column count in mat-grid-list upon the initial loading of the component

My goal is to implement a mat-grid-list of images with a dynamic number of columns based on the screen size. Everything works perfectly except for one small glitch – when the grid first loads, it defaults to 3 columns regardless of the screen size until ...

javascriptcssangulartypescriptangular-material

Loop through an HTML table in order to emphasize variations in cells that contain multiple comparison items

I am interested in highlighting variances between the initial row of a table and all other rows based on columns. I have successfully managed to achieve this when each cell contains only one item/comparison. However, I would like to expand this to include ...

javascripthtml