Exploring the inner workings of flexbox and how it handles overflow situations

Let me start by saying I'm not a frontend programmer, but sometimes you have to become one when the situation calls for it.

I've been pondering the behavior of flex or flexbox lately. If my usage is incorrect, please feel free to point it out to me. Thank you.

The Issue at Hand:

Recently, I attempted to create a basic layout using flexbox and encountered a problem. I'm not sure if it's a bug or if my expectations are too high, but I anticipate the same behavior in the following two cases.

https://jsfiddle.net/bargl_vojtech/upvb1Lgk/7/
https://jsfiddle.net/bargl\_vojtech/h7eokuua/1/
https://jsfiddle.net/bargl_vojtech/q0kegr8o/1/

Although they may look similar at first glance, a closer inspection reveals differences in the main, #inside-main in the CSS, and #wrapper in the HTML.

Brief Overview:

  • main - part of the view
  • #main-header - header for content (e.g., fixed title)
  • #main-content - scrollbox
  • #inside-main - endless content

I expected the second scenario to exhibit the same behavior as the first case. Can anyone explain why they differ?

Thank you for your input.

My expectation: main has flex: 1, so it should resize to fill the remaining parent size. However, somehow #inside-main instructs #main-content to resize itself (as it typically should... a larger inner div should resize a smaller parent div to match sizes). Because #main-content is now larger than its parent, it then resizes that, creating a chain reaction. Shouldn’t this be overridden by overflow: hidden/scroll?

htmlcssflexbox

Answer №1

By default, flex items are unable to shrink below the dimensions of their content, causing your content element to overflow its container.

Flex items start with a default setting of min-height: auto (in a column container) and min-width: auto (in a row container).

To change these defaults, you can use min-height: 0, min-width: 0, or apply overflow with any value other than visible.

You can update your code like this:

main {
  background-color: red;
  flex: 1;
  overflow-y: auto; /* NEW */
}

For further information, refer to these articles:

  • Understanding why flex item doesn't shrink beyond content size
  • Difference in min-width rendering between flex-direction: row and flex-direction: column

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

The functionality of the Angular click event binding seems to be malfunctioning

When I click on a radio button, I want to see relevant selections. Below are the files: app.component.html <div class="col-md-3"> <b>Select Category</b><br> <input type="radio" name="colors" [(ngModel)]="typing" (clic ...

htmlangulartypescript

Merge the values from two input fields into another input field in lowercase separated by a dash

I have a dilemma with converting two text inputs into one lowercase textbox with dashes while typing, similar to the example below. <input type="text" name="first"> <input type="text" name="last"> My goa ...

javascriptphphtmljquerycss

Modifying button text with jQuery is not feasible

I'm facing a challenge with jQuery and I need the help of experienced wizards. I have a Squarespace page here: . However, changing the innerHTML of a button using jQuery seems to be escaping my grasp. My goal is to change the text in the "Add to car ...

javascriptjqueryhtmlsquarespace

Attaching a buoyant div to the precise location of a different element

I have a unordered list (ul) with individual list items (li) that are displayed within a scrollable container. This means that only 8 list items are visible at a time, but you can scroll through them to see the others. Each list item (li) has an "edit" b ...

javascriptjqueryhtmlcss

tips for arranging the body of a card deck

I have a card-deck setup that looks like this https://i.sstatic.net/vuzlX.png I am trying to arrange these boxes in such a way that the total width of the box equals the sum of the Amazon Cost width and the BOXI+ width: https://i.sstatic.net/3uNbe.png He ...

htmlcsstwitter-bootstrapbootstrap-4

Troubleshooting a CSS overflow problem in the main slider

While exploring the website , I encountered a minor issue. When I added "overflow: hidden" to the featured slider div, the images appeared stacked if JavaScript was enabled or the user's internet connection was slow. However, a new problem has arisen ...

htmlcssoverflow

Error: Issue with parsing integer in JavaScript

I'm in the process of developing a dice game that involves rolling two dice and determining the sum. The goal is to display the running total next to the dice. However, I'm encountering an issue where NaN (Not a Number) is being displayed. Here i ...

javascripthtmlnanparseint

Query the SQL database to fetch data and display it in an HTML format using Python

For my single page web application, I am utilizing Flask's micro-framework. Within the database, I have SQL procedures set up to manage user logins and registrations. Upon a user logging in, I want to fetch their name and display a welcoming message ...

pythonhtmlsqlflask

Is there a way to disregard the active region of a child element while the parent is active?

Currently, I am working on building a to-do list application using React. In the CSS styling, I have implemented an animation for when an li element is active, causing it to expand in height. The issue arises from the fact that I have also set up an onClic ...

htmlcssreactjsdesign-patterns

Div overlaps div on certain screen dimensions

When the screen size falls within a specific range, typically in the low 1000s, there is an issue where my content div overlaps completely with the navigation div. It appears as if both divs are positioned at the top of the page. Below is the HTML code sn ...

htmlcss

Troubleshooting problem with Bootstrap 4 carousel for displaying multiple items

Recently, I've been experimenting with Bootstrap 4 carousels and came across a helpful code tutorial that caught my interest. You can check it out at this link. My goal was to prevent the carousel from continuously cycling through the same slides and ...

jquerycsstwitter-bootstrapbootstrap-4carousel

Is it possible to achieve Bootstrap 3-style for the mobile navbar menu in Bootstrap 4?

In the world of Bootstrap 4 https://i.sstatic.net/bMSOK.png Comparing to Bootstrap 3 https://i.sstatic.net/RVITm.png Seeking to replicate Bootstrap 3's menu in Bootstrap 4? This code snippet showcasing Bootstrap 4's menu can be found at : & ...

htmlcsstwitter-bootstraptwitter-bootstrap-4bootstrap-4

Having trouble making SCSS mixins work with CSS variables in NextJS?

My current next.config.js setup looks like this: module.exports = (phase, {defaultConfig}) => { if ('sassOptions' in defaultConfig) { defaultConfig['sassOptions'] = { includePaths: ['./styles'], ...

csssassnext.js

Preserve the scroll position while initiating a jQuery dialog

Utilizing Jquery UI Dialog to showcase a popup box In my design, there is a grid on the page where each row contains an icon that triggers a dialog box An issue arises when scrolling down and opening a dialog at the bottom of the grid, as it causes the p ...

javascriptjquerycssjquery-uijquery-ui-dialog

What is the method for converting a string into HTML formatting?

I am working on a Django project. My goal is to display an output string on an HTML page. Here is my view: def strategy_run(request): output = "hello world!\nstring test" return render_to_response('strategy_run.html', locals()) T ...

pythonhtmldjango

Illustration: Fixing a CSS Issue

After implementing Technique #8 from the Nine Techniques for CSS Image Replacement, I am not getting the desired results. Instead of correctly positioned images, the output is not what I anticipated. Here is a link to see for yourself: I made a modificati ...

css

Developing a versatile table component for integration

My frontend app heavily utilizes tables in its components, so I decided to create a generic component for tables. Initially, I defined a model for each cell within the table: export class MemberTable { public content: string; public type: string; // ...

htmlangulartypescript

Fade one element on top of another using Framer Motion

Looking to smoothly transition between fading out one div and fading in another using Framer Motion, but facing issues with immediate rendering causing objects to jump around. Example code snippet: const [short, setShort] = useState(false); return ( ...

javascriptcssreactjsanimationframer-motion

Back to top button displayed exclusively on desktop view (not visible on mobile devices)

I managed to create a scroll-to-top button that only appears when the user has scrolled down 25px from the top of the document. I achieved this using JavaScript by following a tutorial, as I am still unfamiliar with this programming language. However, I w ...

javascripthtmlcss

What is the best way to place an anchor tag with an image inside a bootstrap grid cell?

I am facing an issue with a 9-cell grid that contains images using Bootstrap columns. The grid is responsive and functions perfectly when only images are present. However, I want to make the images clickable by placing them inside anchor tags (<a>). ...

htmlcssbootstrap-4