Kevin Powell - Community•3mo ago

How to define max width of flex grow container

I right now have a flex grow child container with some overflow in a parent container with display flex. The overflowing container also has a sibling with a set size, and so the size of the overflowing container is not set but defined with flex grow. Though when i do this the container seems to completely ignore the parents height and width constraints. I've recreated it in js fiddle like so: https://jsfiddle.net/5kjoqdzy/32/

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

2 Replies

C_7•3mo ago

1、Understand flex-grow and flex-shrink. 2、Understand the meaning of the flex shorthand. see： https://developer.mozilla.org/en-US/docs/Web/CSS/flex#constituent_properties

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    font-family: monospace;
    color-scheme: dark;
}

.grandparent {
    height: 100vh;
    display: flex;
    flex-direction: column;

    /* This is to ensure viewport size. */
    overflow: hidden;
}

.parent {
    /* This is to occupy the entire bottom half of the page. */
    flex: 1;
    display: flex;

    /* This is to make the bottom half scrollable. */
    overflow-y: auto;
    border: 4px solid #fff;
}

.child1 {
    flex: 0 0 100px;

    /* This is to make the left sidebar scrollable. */
    /* This appears again to allow for separate control. */
    overflow-y: auto;
    background-color: steelblue;
}

.child2 {
    flex: 1;

    /* This is to make the main content area scrollable. */
    /* This appears again to allow for separate control. */
    overflow-y: auto;
    background-color: seagreen;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    font-family: monospace;
    color-scheme: dark;
}

.grandparent {
    height: 100vh;
    display: flex;
    flex-direction: column;

    /* This is to ensure viewport size. */
    overflow: hidden;
}

.parent {
    /* This is to occupy the entire bottom half of the page. */
    flex: 1;
    display: flex;

    /* This is to make the bottom half scrollable. */
    overflow-y: auto;
    border: 4px solid #fff;
}

.child1 {
    flex: 0 0 100px;

    /* This is to make the left sidebar scrollable. */
    /* This appears again to allow for separate control. */
    overflow-y: auto;
    background-color: steelblue;
}

.child2 {
    flex: 1;

    /* This is to make the main content area scrollable. */
    /* This appears again to allow for separate control. */
    overflow-y: auto;
    background-color: seagreen;
}

MDN Web Docs

flex - CSS: Cascading Style Sheets | MDN

The flex CSS shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container.

Ellie <3•3mo ago

Just implimented the changes. Thank you

Gaming

Programming

How to define max width of flex grow container