Parent div's overflow due to its flexbox properties

I am currently facing a dilemma with my nested flexbox setup. The primary objective is to create two responsive columns:

.ColWrap,
{
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    padding: 50px 10px 50px 25px;
    display: flex;
    flex-wrap: wrap;
}

.ColWrap .col,
{
    flex: 1;
    padding: 20px 20px 20px 0;
    margin: auto; 
}

@media screen and (max-width: 600px) {

    .ColWrap {
        flex-direction: column;
    }

    .ColWrap .col,
    {
        width: 100%;
        padding-left: 0;
    }
}

The secondary aspect involves a grouping of what I refer to as "nuggets" within the right column. These nuggets should adjust their layout accordingly:

.nuggetHolder {
    width: 100%;
    margin: 20px;
    display: flex;
    flex-wrap: wrap;
}

.nugget {
    flex: 0 1 40%;
    margin: 10px;
    padding: 10px;
    border: 2px solid rgba(0,0,0,.2);
}

Combining these elements produces the following structure:

<div class="ColWrap">
<div class="col">
    <h2>Left-hand text</h2>
</div>
<div class="col">
    <div class="nuggetHolder">
        <div class="nugget">Nugget NuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNugget</div>
         <div class="nugget">Nugget</div>
         <div class="nugget">Nugget</div>
         <div class="nugget">Nugget</div>
         <div class="nugget">Nugget</div>
         <div class="nugget">Nugget</div>
    </div>
</div>

An issue I'm encountering is the overflow of text in one of the nuggets extending beyond its container.

Would it be advisable to restructure the 2-column container as a grid and then treat each "nugget" as a flexible box?

css

Answer №1

Implement word-break: break-word;

The CSS property word-break: break-word; ensures that all text stays within the boundaries of the containing div.

To enhance the visual appeal, I made the following adjustments:

I included flex-grow: 1; in the .nugget class - this is similar to changing flex: 0 1 40%; to flex: 1 1 40%;

In the .nuggetHolder class, I substituted margin with padding and added box-sizing: border-box; to ensure that the box size calculation includes the border and padding, preventing any issues with horizontal scrolling.

.ColWrap,
{
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    padding: 50px 10px 50px 25px;
    display: flex;
    flex-wrap: wrap;
}

.ColWrap .col,
{
    flex: 1;
    padding: 20px 20px 20px 0;
    margin: auto; 
}

@media screen and (max-width: 600px) {

    .ColWrap {
        flex-direction: column;
    }

    .ColWrap .col,
    {
        width: 100%;
        padding-left: 0;
    }
}
.nuggetHolder {
    width: 100%;
    // margin: 20px;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.nugget {
    flex: 0 1 40%;
    margin: 10px;
    padding: 10px;
    border: 2px solid rgba(0,0,0,.2);
    word-break: break-word;
    flex-grow: 1;
}
<div class="ColWrap">
<div class="col">
    <h2>Left-hand text</h2>
</div>
<div class="col">
    <div class="nuggetHolder">
        <div class="nugget">Nugget NuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNugget</div>
         <div class="nugget">Nugget</div>
         <div class="nugget">Nugget</div>
         <div class="nugget">Nugget</div>
         <div class="nugget">Nugget</div>
         <div class="nugget">Nugget</div>
    </div>
</div>

Answer №2

Include the following CSS properties in .nugget:

max-width: 40%;
overflow-wrap: break-word;

To center it, apply justify-content: center to the .nuggetHolder class.

The use of max-width ensures that any content exceeding 40% will display consistently without overflowing.

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

When elements are passed through components in Next.js, their style does not get applied

I have a unique component for the hero section of every page with varying content and heights. export default function CustomHero({ height, children, }: { height: string; children: ReactNode; }) { return ( <div className={`flex flex- ...

cssreactjsnext.jscomponentstailwind-css

The POST request did not yield an HttpResponse object; instead, it returned None

When I submit a selection from a dropdown form to views as a POST request, and then use this selection to query data from Django, I encounter an issue while trying to map Django models data to Highcharts following this approach. The error message "the view ...

pythonhtmlcssdjango

What is the best way to create a transparent sticky header that blends with the background while still maintaining visibility over images and text?

On my web page, the background features a radial gradient but the content extends beyond the viewport, causing the center of the gradient to not align with the center of the screen, producing the desired effect. However, I'm facing an issue with a sti ...

javascripthtmlcsssticky

Issues with the alignment of ion-grid in Ionic/Angular application

I am facing an issue in my ionic/angular project where I am attempting to create two columns within a row using ion-grid, ion-row, and ion-col. However, the content of the second column is unexpectedly appearing below the first column instead of beside it. ...

cssangularionic-framework

A modern CSS solution for a fixed columns and header layout in a scrollable table

How can I create a table with minimal JavaScript using modern CSS? I am aiming to include the following features: Fixed column(s) (positioning and width) Scrollable in both X and Y axes Responsive in the X axis (for non-fixed width columns). https://i. ...

javascripthtmlcsshtml-table

Trouble arises with kids when trying to adjust the display to block mode

I need to set all the div elements inside the div with id "editor" to display as block. However, when I change the display property of the div with id "editor", only that specific div's display is affected, while everything else inside the div becomes ...

javascriptjquerycss

Position a div at the center of the page while aligning it inline with another div

Is there a way to center an element on the screen while having another element positioned to its left? I have tried using float left and adjusting the padding of the center element to match the width of the left element. However, this method may not work ...

css

Prevent the cursor from exiting the div element when the tab key is pressed

Currently, I have implemented a search input box allowing users to either enter a value or select from a list of suggestions. The issue arises when the user selects an option using the tab key, as it causes the cursor to move outside the input box despite ...

cssreactjs

Using Slick Slider and Bootstrap CSS to display text on top of images

Currently, I am utilizing the slick slider from and I want to overlay text on top of the image. I tried using bootstrap carousel-caption, which works well with any image. However, with slick slider, it seems like the text is not at the highest level as I ...

javascriptcss

What could be causing my inability to accurately guess people's ages?

My latest project involves developing a game where players have to guess names from images. Each game consists of 10 rounds, followed by a bonus round where participants must wager their points on guessing the age of the person in the image within a 2-year ...

javascripthtmlcss

Are you ready to create a Modal Factory?

For a while now, I have been utilizing modals in various front-end frameworks to communicate with users in my applications. Typically, the process involves defining the modal's html and then rendering it through a click event. As my apps continue to ...

javascriptjqueryhtmlcss

What's the best way to add vertical space to my DIV containing buttons?

Here is an example of HTML with CSS classes that float elements left and right: <div class="block-footer"> <button class="medium float-left">A</button> <button class="medium float-left">A</button> <button class="m ...

htmlcss

The "flickering" effect of the div is like a dance, moving gracefully between fade outs and

I am encountering a similar issue as described in this thread: same problem (fiddle: original fiddle). However, I am still learning JavaScript and struggling to apply the solution provided because my HTML code is slightly different. Can someone please assi ...

javascriptjqueryhtmlcss

Having issues with my toggler functionality. I attempted to place the JavaScript CDN both at the top and bottom of the code, but unfortunately, it is still not

I recently attempted to place the JavaScript CDN at the top of my code, but unfortunately, it did not have the desired effect. My intention was to make the navigation bar on my website responsive and I utilized a toggler in the process. While the navbar di ...

javascripthtmlcssbootstrap-5

What could be the reason for Firefox cutting off circular PNG images at the bottom?

Can you explain why Firefox is cutting off circular png images at the bottom of this page: It's strange that IE 10 and Chrome don't have this issue with cropping the images. ...

cssimagefirefoxbrowsercross-browser

The website shifts as you navigate to a new page

Could use some insight on an issue with my website . Whenever I navigate to a different page, like the "Rules" page from the main site, the container seems to shift down slightly. Any ideas on what could be causing this? I've been struggling to pinpoi ...

phphtmlcss

Center align for drop-down menu

I'm currently working on styling an asp:DropDownList element using custom CSS. I have successfully set the height, but I am facing a challenge with getting the text to align in the middle of the element rather than at the bottom. The vertical-align:mi ...

asp.netcss

Menu becomes sticky too quickly on iOS Safari and Chrome, jumping to fixed position prematurely

Feeling frustrated with this seemingly straightforward code challenge. My sticky menu is causing me headaches on iOS devices, particularly the iPhone 6 running the latest iOS. It seems like the menu jumps into its fixed position too early, leading me to be ...

javascriptjquerycssfixedsticky

The bootstrap table did not meet my expectations as I had hoped

I am currently using Bootstrap to create a basic two-column table similar to the one on the Bootstrap website here: http://getbootstrap.com/css/#tables. To achieve this, I have implemented a javascript function to display the table as shown below: $(&bso ...

javascripthtmlcsstwitter-bootstrap

Mobile-formatted inline Bootstrap

Using bootstrap and seeking to have elm1, elm2, and elm3 displayed inline on mobile devices? Take a look at the code snippet below: <div class="container-fluid"> <div class="form-group"> <label class="control-label col-sm ...

csstwitter-bootstrapresponsive-design