Overflow causes flexbox to become unreactive

Implementing the overflow style on a flexbox element appears to negatively impact its responsiveness. Here is the corresponding code snippet:

.projects-wrapper{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  width: 95%;
  margin: 0 auto ;
  padding-bottom: 1rem;

}

.project {
  margin: 1rem;
  flex: 1 1 0;
  border-radius: 5%;
  background: rgb(189, 198, 209);
  transition: all 1s ease-out;
  cursor: pointer;
}
<div class="projects-wrapper">
    <div class="project">
        <img src="img/restaurantapi.png" alt="">
        <div class="project-title">
            <h1>Microservices-Based App</h1>
        </div>
        <div class="project-content">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
        <span class="card-meta">
            <i class="fab fa-github fa-2x"></i>
        </span>
    </div>

    <div class="project">
        <img src="img/restaurantapi.png" alt="">
        <div class="project-title">
            <h1>Microservices-Based App</h1>
        </div>
        <div class="project-content">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
        <span class="card-meta">
            <i class="fab fa-github fa-2x"></i>
        </span>
    </div>
</div>

Upon applying overflow:hidden to the .project class, it seems to disrupt the flexibility of the flexbox layout. This issue requires further investigation and any recommendations you may have are highly valued.

Edit: Additional lorem ipsum text has been included.

cssflexboxoverflow

Answer №1

On mobile devices, the flex starts to wrap due to the default overflow setting. The layout engine attempts to fit all content within the container, and the widest "single non-breakable element" is the word "Microservices-". Once the width of the .project element is less than the width of that word, wrapping occurs, creating a responsive design. Adding overflow:hidden instructs the layout engine to clip overflowing elements by the parent.

A more deliberate approach would be to set a max-width for the .project element to control when wrapping should happen, such as setting max-width: ...px.

To replicate the same behavior as without overflow:hidden where breaks occur on the longest word, you can use min-width: min-content. See the CSS snippet below:

.projects-wrapper{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  width: 95%;
  margin: 0 auto ;
  padding-bottom: 1rem;
}

.project {
  margin: 1rem;
  flex: 1 1 0;
  border-radius: 5%;
  background: rgb(189, 198, 209);
  transition: all 1s ease-out;
  cursor: pointer;
  min-width: min-content;
  overflow: hidden;
}

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

Issues surrounding horizontal scrolling using CSS and HTML

Recently, I've been honing my coding skills by creating websites using HTML and CSS. I came up with an interesting concept for a horizontal scrolling menu. You know the type I'm talking about - where clicking on one item jumps to another in a cyc ...

htmlcss

I am interested in incorporating various forms within this code

I followed an online tutorial to create this code, and I've made some edits myself, mainly related to the buttons that display information. However, I'm still learning and struggling with adding different forms to each section. I would really app ...

javascripthtmlcssdeployment

Changing text color with JQuery animation

Is there a way to animate text color using jQuery/jQuery UI? I want the text color to change from #000 to #F00 when an event is triggered, then fade back to #000 over 3 seconds. I attempted using effect("highlight", {}, 3000) with the highlight effect, bu ...

jquerycssjquery-ui

How can you apply an active class using React-Router?

My React-Router navigation issue nav.tsx import React from 'react' import { menu } from './menu' import { Link } from 'react-router-dom' import styles from './HamburgerMenu.module.scss' const HamburgerMenu: React.F ...

cssreactjstypescriptreact-routerreact-router-dom

Is it possible to achieve a height transition using CSS instead of relying on JavaScript

I created these custom cards using a combination of HTML, CSS, and JavaScript. However, I've noticed that the height transition animation is not as smooth as I'd like it to be, especially on certain pages. Is there a way to achieve this animation ...

javascriptjqueryhtmlcss

Looking for a Horizontal Layout?

@foreach (var item in APModel) { <div class="row row-cols-1 row-cols-md-2 g-4"> <div class="col"> <div class="card" style="width: 18rem;"> <img src="h ...

htmlcssbootstrap-5

Applying styled text to a Node.js chat application

I developed a chat application using node.js which allows users to enter a username and send messages. The messages are displayed in a <ul> format showing "username: message". I was looking for a way to make the username appear bold and in blue color ...

javascriptjqueryhtmlcssnode.js

Is Webkit's Overflow Scrolling feature hiding the divs on your website?

I recently implemented a design for my website where the content is contained within an absolute positioned div that takes up the entire screen. However, I noticed that the scrolling on this div felt clunky and not as smooth as I would like it to be. After ...

htmlcssiosmobile-safari

Tips for transforming a scroll element into the viewport using Angular 2+

This is a sample Here is a component with a list of items: class HomeComponent { text = 'foo'; testObject = {fieldFirst:'foo'}; itemList = [ '1', '2', '3', & ...

javascripthtmlcssangularscroll

Efficient Techniques to Eliminate Unwanted Jumping in CSS Transitions

I am currently working on a unique "stack" component that is inspired by the amazing ElastiStack. You can check out a cool demo of my work here. The demo works flawlessly on desktop Chrome, but unfortunately, I have encountered some issues with the transit ...

jqueryioscsscss-transitions

Settings for the packaging of web components

Is there a way to configure a web component in vue.config.js and separate the iconfont.css section when building? I am using the vue-cli-service build --target wc-async --name chat-ui src/views/Chat/Launcher.vue --report command to package the web compon ...

cssvue.jsweb-componentfont-facevue-cli

What is the process for creating a stationary container positioned on the left side, which extends vertically down the page to showcase a collection of skills?

Hey there, I'm a newcomer to web development. For my very first project, I'm working on a resume page. I'm looking to have a fixed left div where I can showcase my skills, and a larger div on the right side for the main body content containi ...

htmlcssbootstrap-5

Using the CSS property 'clear' creates a significant gap in the layout

Using a div like this to clear space after floats: .clear { clear:both; } However, the formatting is getting messed up with extra space. Any ideas on how to fix it? Appreciate your help! ...

css

What is the reason for the ul selector not functioning in the attached CSS file?

I attempted to create a navigation bar by using the code below. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body class="background"> <ul> <li>Home</li> <li>Ne ...

csshtmlcss-selectors

Show the div in the right position for both desktop and mobile screens, utilize an accordion or consider shifting the div

My webpage is designed using bootstrap 4 and showcases images of our team members along with accordion functionality to display bios upon clicking the image. On a desktop screen, everything functions smoothly with four images of team members displayed in ...

htmlcssbootstrap-4accordion

Sending user input from search component to main App.js in React

I'm currently working on an app that searches a Movies database API. I have a main fetch function in App.js, and in tutorials, people are using a search bar within this main APP component. I'm wondering if it would be better to create a separate ...

javascripthtmlcssreactjsjson

Placing an image within a table row that spans multiple rows to maintain center alignment in relation to other rows that are not span

Having trouble with centering the image in an email signature when viewed in GMail. The layout works fine in JSBin but appears uneven in GMail. Any suggestions on how to make sure it stays centered? Check out the code here https://i.sstatic.net/F2LXV.png ...

htmlcsshtml-table

Creating manageable CSS styles for a wide variety of themes

I need to add themes to a web application that allows users to switch between them seamlessly. The designers want a variety of font colors and background colors, around 20 in total. Is there a way to achieve this without creating multiple .css files, which ...

javascripthtmlcssthemes

The cascading menu causes interference with the function of other elements in the

I am currently designing a navigation bar that includes a drop-down menu (with plans to add another one in the future). The issue I'm facing is that when the user clicks on the drop-down menu, it shifts all of the navigation links to the right. What I ...

javascriptjquerycss

creating a div that functions similarly to a radio button

Is it possible to create a div that mimics the behavior of a radio button? I'm looking for a solution that doesn't involve jquery, as many people have recommended. After doing some research, I found a few potential options. In the past, I'v ...

javascripthtmlcss