Flex children do not adhere to max-height and max-width properties

There seems to be an issue with setting the max-width and height for flex children. The div is getting squished down to fit its children exactly, possibly due to the styling associated with div .content. It's not clear why this is happening.

The division should ideally have a max-width and height of 1600px x 500px so that it can flex correctly and move closer together as the page width decreases.

  //CSS code here
  
          

<html>
    <body>
        <div class="content">
            <div class="waveContainer">
                //SVG element here
            </div>
            <div class="flexParent">
                //Flex parent content here
            </div>
        </div>
    </body>
</html>

Link to CODEPEN for reference

htmlcssflexbox

Answer №1

Consider placing width and height declarations after max-width and max-height

  .flexParent {

    display: flex;
    justify-content: space-between;
    align-items: center;

 
    /* ADDITIONAL STYLING */
 
     max-width: 1600px;
     max-height: 500px;  
     width: 200px; 
     height: 300px; 

    opacity: 0.6;
    background-color: yellow;
  }

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

What is the process of turning an SVG element into a clickable link?

Is there a way to transform each element within an SVG image embedded in an HTML file into an active link? I want to create an SVG image with clickable elements. Here is a snippet of the SVG image: <svg version="1.1" id="Layer_1" xmlns="http://www.w3 ...

javascriptjqueryhtmlsvg

Using Angular to display exclusively the selected items from a list of checkboxes

Is there a way to display only the checked items in a checkbox list? I am looking for a functionality where I can select multiple items from a checkbox list and then have an option to show only the selected items when needed, toggling between showing just ...

javascripthtmlangularjscheckbox

Feeling lost when it comes to forms and hitting that submit button?

Below is a sample form structure: <html> <head> <title>My Page</title> </head> <body> <form name="myform" action="http://www.abcdefg.com/my.cgi" method="POST"> <div align="center"> <br><br; <br& ...

javascripthtmlcss

Unable to retrieve field values from Firestore if they are numeric rather than strings

I need to display this information in a list format: li.setAttribute('data-id', updatesArgument.id);//'id' here unique id Example 1 name.textContent = updatesArgument.data().count;// Works if String Example 2 let i=1; nam ...

javascripthtmlfirebasegoogle-cloud-firestore

Find the HTML elements within an XDocument that need to be replaced and converted into Json format

XML contains HTML tags that need to be removed using XDocument. Is there a way to identify nodes with HTML tags and replace them throughout the entire document? Below is a sample of the XML structure: <?xml version="1.0" encoding="utf-8"?> <myFie ...

c#htmljsonxmllinq-to-xml

Are there any other CSS methods available to address the limited support for flex-grow in Safari?

I'm currently developing an interactive "accordion" component that can accommodate multiple child elements. Each child item closes to the height of its header, but expands evenly with other open siblings when activated. If this explanation is unclear, ...

cssflexboxcss-grid

What is the best way to incorporate a CSS transition without any dynamic property changes?

Is there a way to add a transition effect to a header when its size changes without a specified height value in the CSS? The header consists of only text with top and bottom padding, so as the text changes, the height adjusts accordingly. How can I impleme ...

javascripthtmlcsscss-transitions

Determine whether a click event originated from within a child window

Currently, I am utilizing window.open to initiate a new window in javascript and my goal is to identify clicks made within the child window. Essentially, if a click event occurs in the child window, I aim to modify the parent window accordingly. I have a ...

javascriptjqueryhtml

Encountering a jQuery error while trying to utilize the $window.load

I have a code snippet that is functioning well when wrapped within a document ready event: jQuery(document).ready(function($) { $('tr[data-name="background_colour"] input.wp-color-picker').each(function() { //this section works fin ...

javascriptjqueryhtmlcssiframe

How to centrally align tabs in Material-UI AppBar using ReactJS

I'm developing a React Application using Material-UI and facing difficulty in centering the 3 tabs within the blue AppBar. Currently, they are aligned to the left like this: (unable to embed images at the moment, apologies) This is the code snippet ...

cssreactjsmaterial-uiappbarcenter-align

6 Steps to Extract Data from a POST Request Using JavaScript

I have a form that includes a text field and a select field. When the form is submitted, I am posting it. Can someone guide me on how to extract the form data on the server using JavaScript? <form id="createGameForm" action="/createGame" method="post" ...

javascripthtmlexpress

Guide to getting Material-UI Dialog up and running smoothly in your React application

I'm currently working on a project using material-UI, and I'm having trouble with the Dialog component not working properly. Despite trying various solutions, I haven't been able to get it to function correctly in my React application with m ...

javascripthtmlreactjsreact-reduxmaterial-ui

Displaying a hand cursor on a bar chart when hovered over in c3.js

When using pie charts in c3js, a hand cursor (pointer) is displayed by default when hovering over a pie slice. I am looking to achieve the same behavior for each bar in a bar chart. How can this be done? I attempted the CSS below, but it resulted in the h ...

javascriptcssd3.jsc3.js

SQL/PHP challenge: Trouble updating a record

As a newcomer to PHP, I apologize if my question is basic. I am attempting to update a record using PHP / SQL. Despite researching the error message online, I cannot pinpoint the issue within my code: An error occurred: SQLSTATE[HY093]: Invalid paramet ...

phphtmlsqlrecord

Expand the table in the initial state by using CSS to collapse the tree

I am struggling to collapse the tree view and need assistance. Below is the code snippet I've added. My goal is to have each node in the tree view initially collapsed and then expand a particular node on user interaction. For example, when I execute ...

javascriptjquerycss

Modify the color of a div element in React when it is clicked on

My goal is to change the color of each div individually when clicked. However, I am facing an issue where all divs change color at once when only one is clicked. I need help in modifying my code to achieve the desired behavior. Below is the current implem ...

javascripthtmlreactjscolors

Is the main content positioned below the sidebar on smaller screens?

In order to achieve a 250px col-2 sidebar with a col-10 main body that collapses into a top navbar and main content beneath it, my goal is set. However, I am facing an issue where the main content body goes underneath the sidebar when the screen size cha ...

htmlcssreactjstwitter-bootstrapbootstrap-5

Unable to submit multiple forms simultaneously on the same HTML page

I have been encountering an issue with forms in a particular file. The problem arises when I click submit, rather than submitting the data from the filled form, it submits the data from the first form. Despite specifying unique ids for each form as shown i ...

phphtmlforms

Tips for recognizing components within the #document are as follows:

I am currently utilizing xpath to extract data from a dynamic table in an HTML document. The specific information I am looking for is contained within a tag identified as #document. However, I am encountering difficulties including this unique element in ...

pythonhtmlseleniumxpathiframe

Is there a way to incorporate cell highlighting on IE?

I've implemented a method to highlight selected cells based on the suggestion from jointjs. It surrounds the cell with a 2-pixel red border, which works well in Chrome. However, I need the outline to work in IE as well. Unfortunately, when I reviewed ...

javascripthtmlsvgjointjs