What's causing these flex items to not wrap around properly?

I'm facing an issue with a flex item that also acts as a flex container, .sub-con. The problem is that the flex item within .sub-con is not wrapping even after applying flex-flow: row wrap.

Is there anyone who can help me resolve this problem or identify what I am doing incorrectly?

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row wrap;
  height: 100vh;
}

.sub-con {
  margin-right: 50px;
  margin-left: 50px;
  height: 500px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
}

.col-one {
  height: 100px;
  border: 1px solid lightgreen;
  flex-grow: 2;
}

.col-two {
  height: 100px;
  border: 1px solid red;
  flex-grow: 1;
}
<div class="container">
  <div class="sub-con">
    <div class="col-one"></div>
    <div class="col-two"></div>
  </div>
</div>

htmlcssflexboxword-wrap

Answer №1

Your nested container's flex items are sized using percentage values.

.col-one{
  width: 40%;
  height: 100px;
  border: 1px solid lightgreen;
}
.col-two{
  width: 40%;
  height: 100px;
  border: 1px solid red;
}

Since percentages are relative to the parent element, they will not wrap. They will always be 40% of the parent's size, regardless of the parent's width.

If you use other units like px or em, they may wrap based on the parent's size.

Check out the jsFiddle demo here

 .container {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-flow: row wrap;
   height: 100vh;
 }
 
 .sub-con {
   flex: 1;  /* for demo only */
   align-content: flex-start; /* for demo only */
   margin-right: 50px;
   margin-left: 50px;
   height: 500px;
   background-color: #fff;
   display: flex;
   justify-content: center;
   flex-flow: row wrap;
 }
 
 .col-one {
   width: 200px;
   height: 100px;
   border: 1px solid lightgreen;
 }
 
 .col-two {
   width: 200px;
   height: 100px;
   border: 1px solid red;
 }
<div class="container">
  <div class="sub-con">
    <div class="col-one"></div>
    <div class="col-two"></div>
  </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

tips for reducing the size of the recaptcha image to display just one word

The custom recaptcha theme I'm working with requires the image to be smaller in width but not in height. Is there a way to achieve this requested design? ...

phpcssrecaptcha

Troubleshooting HTML/CSS problem related to background size adjustment

Struggling with setting a background image on my HTML code. The issue is when I resize the browser, the image either zooms in too much or cuts off part of the website. Is there a way to resize the background image based on the browser window size? Appreci ...

htmlcssimageresize

Sliding backgrounds that stay fixed and responsive

Looking to replicate a slider similar to the one in the 'recent results' sidebar on this site: . The slider has a fixed background with sliding content. I've attempted using various frameworks to recreate it, but haven't been successful ...

javascriptjqueryhtmlcss

Struggling with jquery's addClass method when trying to apply a class to

Below is a sample tr: <tr> <td><input type="text" class="ingredient required" name="ingredient"></td> <td><input type="number" class="amount required" name="amount" ></td> <td><input type="number" c ...

javascriptjqueryhtmlcssdom

Creating multiple nested ng-repeats in an AngularJS table

Managing a large amount of data on users' availability by hour for multiple days can be challenging. The data is structured as follows: availData = { "date1":arrayOfUsers, "date2":arrayOfUsers, ... } arrayOfUsers= [ userArray, userArray, ... ] user ...

javascripthtmlangularjs

Adding Components Dynamically to Angular Parent Dashboard: A Step-by-Step Guide

I have a dynamic dashboard of cards that I created using the ng generate @angular/material:material-dashboard command. The cards in the dashboard are structured like this: <div class="grid-container"> <h1 class="mat-h1">Dashboard</h1> ...

htmlangulartypescript

Resolving conflicts between Bootstrap and custom CSS transitions: A guide to identifying and fixing conflicting styles

I am currently working on implementing a custom CSS transition in my project that is based on Bootstrap 3. The setup consists of a simple flex container containing an input field and a select field. The functionality involves using jQuery to apply a .hidde ...

javascripthtmljquerycsstwitter-bootstrap

AngularJS is used to vertically collapse three different div elements. This feature

I am facing an issue with the design of my page that contains three panels. Two of these panels have tables, and when viewing the page on a smaller display, it disrupts the layout. I am wondering if there is a way to add collapsible buttons to the panels s ...

htmlcssangularjs

Show the list in a circular buffer fashion

I am working on a project that involves creating a unique UI element. In Frame #2 of my professionally designed diagram, I envision a list that functions as a ring buffer/rolodex when it exceeds four items. The list would scroll in a loop with the top and ...

javascripthtmlcss

What is the method to display a caret in regular HTML text with the use of JavaScript?

Currently, I am studying JavaScript and aiming to develop a typing game similar to typeracer.com. The goal of the game is to type accurately and quickly without errors. In this game, users input text into a box, and JavaScript then compares their inputs w ...

javascripthtml

Verify the authenticity of a date using the locale parameter in the Intl API

Seeking advice for validating inputfield based on locale argument. How to format dates differently depending on the specified locale? For example, if locale is 'en-uk' then date should be in mm/dd/yyyy format, but if locale is 'de-ch' i ...

javascripthtmlvalidationdateecmascript-6

Is it possible to perform a CSS flip animation without delay?

Trying to implement David Walsh's CSS flip effect for an image that should change to another without requiring a mouseover. Is there a way to trigger it automatically, maybe in 3 seconds? I'm new to this so any help would be greatly appreciated! ...

htmlcss

Execute action after changing background-position in JQuery

I am currently updating the background-position property of a div to gradually change its color from left to right. After completing the position transition, I am looking to trigger another action in JQuery to modify the fill of the #event_2 element: < ...

jquerycss

Is there a way to restrict keyboard input on this date picker?

Can you review the following link and let me know which properties or events I should utilize in this scenario? https://codesandbox.io/s/charming-frost-qrvwe?file=/src/App.js ...

javascripthtmlreactjsdommaterial-ui

Pandas now supports exporting data frames to HTML with the added feature of conditional

Is there a way to format a table in pandas where data in each column are styled based on their values, similar to conditional formatting in spreadsheet programs? An example scenario is highlighting significant values in a table: correlation p-value ...

pythonhtmlcssdataframepandas

There are mistakes in the code that I am struggling to fix

I am encountering an issue where my website only functions properly on Firefox and not on Chrome. However, when I run the HTML using NetBeans on Chrome, the website works fine. I'm unsure of what to do as I need to submit this project within the next ...

javascriptjqueryhtmlangularjs

Why is it impossible for me to delete the class / property of this object?

Within a series of nested divs, there are additional divs containing multiple imgs. The goal is to cycle through these images using CSS transitions. To achieve this, a JavaScript object was created to track the divs, sub-divs, and images. Three arrays were ...

javascripthtmlcssarrays

Positioning an HTML div

Currently, I am diving into the world of HTML and have included a relative div in my code. Although there are two additional divs positioned before it, they do not overlap; unfortunately, the first two still occupy space above the relative one. My desire ...

htmlcss

What is preventing my CSS from being applied to elements other than the body, despite using block content?

I'm trying to customize the style of my webpage body, but it's also affecting my navbar from the base.html file. Can anyone help me understand why this is happening and how I can isolate the styling to just apply only to the <body> contents ...

htmlcssdjango

Highlighting table rows on mouseover using CSS

I am trying to add a hover effect to my table rows, but when I apply the CSS styles for this behavior, the rows start wrapping. Here's a comparison of how the table rows look before and after applying the styles. You can see the wrapping issue in the ...

htmlcss