Expanding a div container to accommodate its inner divs using CSS

I have a div containing three inner divs.

ONE - I am div   TWO - I am div   THREE - I am div

When viewed on mobile, only two divs can fit in a row horizontally. I want the third div to move down.

Like this:

ONE - I am div   TWO - I am div
        THREE - I am div

How can I achieve this layout?

I am utilizing flex.

Edit

I have included the HTML code snippet.

In my project using React and other UI components, I simplified it into something like this.

<div class="parent">
  <div class="child">
    <span>ONE</span>
    <p>I am div</p>
  </div>
  <div class="child">
    <p>TWO</p>
    <p>I am div</p>
  </div>
  <div class="child">
    <span>THREE</span>
    <p>I am div</p>
  </div>
<div>

.parent {
  display: flex;
  justify-content: space-around;
  margin-bottom: 3rem;
  white-space: nowrap;
}

.child {
  display: flex;
  align-items: center;
  margin-left: 1rem;
  margin-right: 1rem;
}
javascripthtmlcssjsx

Answer №1

If you need your content to flow onto the next line, consider using the flex-wrap property. To center the div, you can utilize the justify-content property.

.outer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* The styles below are just for demonstration purposes */
.inner {
  height: 50px;
  width: 300px;
}

.red {
  background: red;
}

.green {
  background: green;
}

.blue {
  background: blue;
}
<div class="outer">
  <div class="inner red">A</div>
  <div class="inner green">B</div>
  <div class="inner blue">C</div>
</div>

Answer №2

This method is ideal for creating a responsive design that allows elements to adjust and fit into one line if the screen size permits. By utilizing media queries, you can easily customize this layout specifically for mobile devices.

   .container{
      display: flex;
      flex-flow: wrap;
      text-align: center;
    }
    .item{
      flex-grow: 1;
    }

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

From jQuery to Vanilla JavaScript: Implementing a simple click event listener

I've been attempting to translate the following jQuery code into vanilla JavaScript, however, I can't get it to function properly. jQuery: $(document).ready(function() { $("button").click(function() { var char = "0123456789abcdefghijklmno ...

javascriptjquery

JQuery UI autocomplete vanishes instantly without any warning

I am encountering an issue with JQuery UI's autocomplete feature where the dropdown results do not stay visible. While debugging, I noticed that the list briefly appears before disappearing. Below is my code snippet: HTML: <input type="text" plac ...

javascriptjqueryjquery-uiautocomplete

What is the optimal method for navigating through a complex nested object in Angular?

Looking to navigate through a nested object structure called purchase. Within this structure, there is a sub-array named purchaseProducts which contains another sub-array called products along with additional data. What methods do you suggest for efficien ...

javascriptangulartypescriptangular9

Tips for generating a single sitemap in Next.js

Utilizing the next-sitemap package to generate a sitemap, I have both dynamic and static pages. This is what my next-sitemap.config.js file looks like: module.exports = { siteUrl: 'https://example.com', generateRobotsTxt: false, excl ...

javascriptreactjsnext.js

AngularJS OAuth authentication Pop-up: Waiting for JSON response

I am looking to initiate an oauth request in a new window for my project. Here is how I can open the new window: var authWindow = $window.open("/auth/google/signin", ""); After the callback, my server will respond with JSON data: app.get('/auth/ ...

javascriptjsonangularjsoauth-2.0passport.js

How come the focus doesn't work when altering the CSS code simultaneously?

My attempt at creating a user interface involved an issue where the input field was not visible initially. After clicking the button, the input would appear on the screen, and I wanted to automatically focus on it. This is what I tried to achieve: Initial ...

cssreactjsreact-hooksdisplay

The Challenge of Page Refresh in Express and Node.js

I am new to web development and servers, having only taken one course in university. I am facing a strange issue with a GET request where it stops being sent after multiple refreshes. Here is the output from npm start when it is working: GET / 304 0.350 m ...

javascriptnode.jsexpresswebserver

Implementation of Gallows Game

SITUATION Recently, I took on the challenge of creating a "HANGMAN" game using JavaScript and HTML exclusively for client-side machines. The logical part of the implementation is complete, but I am facing a hurdle when it comes to enhancing the aesthetics ...

javascript

Transmit JSON data using Autobahn Python

I am attempting to use sendMessage to send the json content from a URL to a client. def broadcast(self): response = urllib2.urlopen('http://example.com/json?as_text=1') data = json.load(response) for c in self.clients: c.sendMessage( ...

javascriptpythonjsontwistedautobahn

Unable to retrieve content in NGX-Quill upon submission

I am currently using "ngx-quill": "^14.3.0" along with "@angular/core": "~12.2.0". It is registered in the app module: QuillModule (not for root). And also in the lazy loaded module: QuillModule (not for root). public editor = { toolbar: [ ...

javascriptangularquillngx-quill

What is the issue with undefined params in Next.js?

I have come across an issue with the function in app/api/hello/[slug]/route.ts When I try to log the output, it keeps showing as undefined. Why is this happening? The code snippet from app/api/hello/[slug]/route.ts is shown below: export async function G ...

javascriptreactjsnext.jsnext.js13

Updating the VueJS DOM when a different value is chosen from the dropdown menu

I am facing an issue with updating the DOM using the following logic: index.vue [Template Part] <div> <div v-for="obj in objects" :key="obj.id"> <select v-model="obj.quantity" @change="qtyChange(obj)"> < ...

javascriptvue.jsdomwatchvue-cli-3

Enhance chat functionality by integrating MySQL database to store and update chat messages

I'm currently working on developing a chat system that allows users to enter the chat and send messages. The messages are being stored in a MySQL database, and here is a snippet of my code... <script> $('input[type=text]').on('ke ...

javascriptphpmysqlajax

Alter the design when hovering over a relevant element

How can I change hover styles for specific items in React? Currently, all item styles change at once when hovered. I want to only change the style of the selected div when hovering over the add to cart button. Visit this link import React, { useState } fr ...

javascriptreactjshoverdestructuringonmouseover

What is the method to reduce the gap between the label and field in Vuetify input controls?

Consider a custom Vuetify text field as an example (Playground) <template> <v-app> <v-container> <v-text-field label="label goes here" variant="plain" density="compact" ...

htmlcssvuetify.js

Gradually vanishing words while they glide across the screen

I want to achieve a similar effect seen in the game A Dark Room. The text in the game serves two purposes which I am trying to replicate: The new text is added above the old text instead of below it, pushing the older text down the page as the game progr ...

javascriptjquerycss

Can you explain the owlItem feature found in owl carousel?

Does anyone have an idea about this? .data("owlItem") How can I find this in jQuery or the console log? I don't think this is a data attribute. .data("owlItem") .data("owlItem") $("#slider_thumb").on("click", ".owl-item", function(e){ ...

jqueryhtmlowl-carousel

What is the correct method for verifying the presence of a field in JavaScript (or its frameworks)?

Is there a better way to rewrite this computed method in JavaScript to handle cases where a field may not be available? computed() { isVerified() { return this.name.info.is_valid; } } I can make it less verbose, but I want it to still functi ...

javascriptvue.js

What is the best way to transfer data to a modal in React.js?

In my table, I am using .data.map() to return data like this: {this.state.data.map((item, i) => { return ( <tr> <td>{item.id}</td> <td>{item.name}</td> ...

javascriptarraysreactjsjson

Having trouble with your website not adjusting properly when resizing the browser or viewing it on a mobile phone

My website is not adapting properly to different screen sizes, even after I have added the META tags below. Any advice would be appreciated. Thank you. HTML <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="UTF-8> ...

htmlcssmeta