set percentage in css

If you want to set a percentage width or height, you must sure the parent nood have set a fix width or height, min-width and min-height are not the kind of fix. normally, you can set a min-width and width to make a responsive website. This approach like flex-grow flex-shrink flex-base, flex-grow can automatically adjust, flex-base is set a base size.

flex-basis is a CSS property used in a flex container to define the initial size of a flex item before any extra space is distributed based on flex-grow or flex-shrink properties. Think of flex-basis as a starting point for the width (in a row layout) or height (in a column layout) of the flex item.

PS: If father flex-direction is row, the children can’t set width. Conversely, If the flex-direction is column, the height parameter of children will invalid. You only can set the flex-base to modify your main-axis sizing.

And the cross-axis sizing is default 100% without setting align-items.

GPT said

Your color-bar div isn’t taking up the full 60% height as expected due to a few potential issues. Here’s how to troubleshoot and fix this:

1. section-one height constraints: Since section-one is defined to have a minimum height (min-height: 90vh), the color-bar div’s height of 60% is relative to the .section-one container, which can make the layout behave unexpectedly based on screen height.

2. Parent container height: Because .section-one only has a min-height, its height can change if the content inside it grows, making color-bar‘s height unpredictable.

3. Testing with height directly: To see the desired effect of color-bar taking up 60% of the viewport height, try setting its height explicitly as height: 60vh; (viewport height). Alternatively, ensure .section-one has a fixed height rather than just min-height.

Here’s the modified code with 60vh applied to color-bar:

<div class="color-bar" style="height: 60vh;">
    hi
</div>

Or set the height of .section-one to a fixed height, for example, 90vh, to make the 60% height work as intended:

.section-one {
    height: 90vh;
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: space-between;
    position: relative;
}

This should help you see the color-bar at the expected height. Let me know if this works for you!