Scale div element to fit in parent div together with button heightwise

user_19814568 0
Viewed 17

I am trying to achieve the following design:

https://i.imgur.com/xPeyFeI.png (Sorry for the link, I apparently can't post images)

The Back button is sized with the following CSS:

width: 10em;
height: 2.7em;

I am looking to achieve it with an HTML structure similar to this:

<FloatLeftDiv> // this container is floated to the left and has 100% height and a set width
    <SpacedButton style={props.style}}>Back</SpacedButton> // button styled with em
    <SideSelectionDiv> // this is the container I want to fit the parent div, heightwise.
        <p>test</p>
    </SideSelectionDiv>
</FloatLeftDiv>

The issue is that I am struggling to get the 'SideSelectionDiv' to scale to the full height of the parent div.

This is what I have so far.

https://i.imgur.com/phdVKDi.png (Sorry for the link, I apparently can't post images)

Goal is to fit the red div in the picture to the parent div in green (heightwise).

My actual code:

HTML

<FloatLeftDiv>
    <SpacedButton style={props.style}}>Back</SpacedButton>
    <SideSelectionDiv>
        <p>test</p>
    </SideSelectionDiv>
</FloatLeftDiv>

CSS

const FloatLeftDiv = styled.div`
    height: 100%;
    border: 1px solid green;
    float: left;
`

const SideSelectionDiv = styled.div`
    border: 1px solid red;

    height: 80%;
    margin: 0.5em;
`

const StdButton = styled.button`
    height: fit-content;
    width: 10em;
    height: 2.7em;
    background-color: ${props => props.style.primary};
    color: ${props => props.style.secondary};
    font-size: 1.5em;
    padding: 0.2em;

    border-radius: 0.5em;

    cursor: pointer;

    &:hover {
        background-color: ${props => props.style.secondary};
        color: ${props => props.style.primary};
    }
`

const SpacedButton = styled(StdButton)`
    margin: 0.25em;
`

My first concrete thought was to use FlexBox (more specifically flex-grow), but I have not managed to get it to work myself, hence why I am writing this question. Thank you.

styled-components css html
1 Answers

Solved it myself, couple of minutes after spending half an hour on a StackOverflow question of course.

Solution:

const FloatLeftDiv = styled.div`
    height: 100%;
    border: 1px solid green;
    float: left;

    display: flex; // Added
    flex-direction: column; // Added
`

const SideSelectionDiv = styled.div`
    border: 1px solid red;

    height: 100%; // Changed
    margin: 0.5em;
`

I was overcomplicating it, just making the parent flex and the child div 100% height fits it perfectly.

user_198145680
Related