Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Adaptive parent width with multiple inline child

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #237254
    poolboy
    Participant

    Hello,

    I would like to achieve the same effect than the visual below the hr of this pen (see in full screen to understand the problem) :
    http://codepen.io/poolboy/pen/MKVWrj

    I’ve got one container with some random inline-block content. In the real case, each child have their own width depending on their own content. After this container, there is another element.

    When there is enough width, all the elements are on the same line, which is perfect. But if you resize the window, there is a moment when the last green child will go to a new line leaving a blank in the first line. Why the red container continue to expand to the right in this case ? Is there a way to make it stop this behavior ? When the last green child go to line I would like that the red container don’t expand more than the width needed for the longest line.

    Thank you

    #237255
    beedesigned
    Participant

    Hi, have you tried to put a max-width:70%; on the parent DIV

    #237259
    poolboy
    Participant

    Hi beedesigned,

    I can’t define a specific width. Consider that the green children could be of any size. In certain case, the total width of all those green children could be more than 70% of the page.

    #237280
    Paulie_D
    Member

    No..that’s not possible…that’s not the way inline boxes work.

    Here…I think this is a great answer over on Stack Overflow

    http://stackoverflow.com/questions/34995740/css-when-inline-block-elements-line-break-parent-wrapper-does-not-fit-new-width

    #237283
    poolboy
    Participant

    Thanks for the link, can’t be clearer. Never heard this shrink-to-fit width. Thanks also for your comment about flexbox.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.