Pricing Blog

Parent width question

  • ssssadsadasd-1315274759025594398

    ssssadsadasd

    7 months ago

    I have a ul with max width = 600px. I set the li inside it as width = max_width = 100%; same for the div inside this li. Now this div is a row with two elements: an image and another div. This last div goes beyond the parent so I set max_width = 100%, but this does not solve the problem in this case since 100% is considered as the whole parent div and not 100% - image_width.
    What should I do to make sure tha this last div does not go beyond the width of the parent? thanks
    1315274759294025799-image.png
  • lucasg-1315350269654990989

    Lucas G

    7 months ago

    Flex: 1
  • chrislaupama-1315443915985391737

    Chris Laupama

    7 months ago

    Yup flex: 1

    100% is a direct size declaration that sets the dimension to exactly 100% of the parent container's corresponding dimension, regardless of layout context.

    flex:1 tells an element to grow and share available space proportionally with other flex items, making it responsive to the container's size changes.
  • plusmin-1315500603643920474

    Armand

    7 months ago

    @ssssadsadasd here's an interactive guide on that: https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/