How to force child element adherence to `flex: nowrap;` CSS directives


Tags: javascript,css,svg,flexbox

Problem :

I have a couple of d3.js animations on-screen at the same time, each governed by CSS display: flex; and flex: nowrap; directives, the only telling difference between the problematic one (which wraps) and other, correctly-displayed (ie non-wrapping) animations being that:

  • because it has non-svg header and text input elements, it comprises anchoring div or section elements. (As I understand, these, being block-level, theoretically occupy the entire available display width, and so have, in the css file, been 'overridden' with the setting display: inline;.
  • overflowing svg path elements, whose length has now been physically curtailed so as to match the limits of the containing svg:svg element.

Frustratingly, the animation steadfastly refuses to be governed by the flex: nowrap; directive.

The question:

Is there a general approach to ensuring that flex row nowrap behaviour is determined by what is actually visible on-screen, and not by containing (or sibling) block-level elements such as section or div, or wider but overflow: hidden; child svg lines or path content?

Note: other questions/answers on this topic relate to text, not section, div or svg.

All animations are theoretically governed by the parent flex-flow: row nowrap; setting.

The associated widths are such as to allow plenty of free space around each.

It would be nice to think the parent flex-flow: row nowrap;, taken together with the svg:svg element's overflow: hidden; and the block-level display: inline; CSS settings would be enough to ensure that no wrapping occurs. I have checked in the inspector, and all dimensions displayed lie within limits required for flex-flow: row nowrap;.

The only elements in play are section (or div), text, svg, g, input, ul and li. In practice, something is leading to unwanted wrapping. My feeling is that the block-level elements are the source of the problem. Can you suggest a strategy to avoid this?

Failing this, are there alternatives I can use as containers for text input elements which are less likely to cause problems?



Solution :

Once again, the answer arrived during sleep.. :-)

Firstly, use of display: inline; on block-level elements seems not, at least in this situation, have the effect on width claimed by some bloggers (in fact tends to pollute the parent flex context).

This in turn led to a search for alternative inline elements to replace div or section. On substituting the inline element span in place of the block-level elements div or section, the desired nowrap behaviour immediately took effect, but in turn knocked out my (now local) vertical block layout. This was restored using display:inline-block; on the containing span, so:

originally (somewhat simplified):

     ---------- header
    /
div--- svg:g -- svg:svg (with overflow:hidden;)
    \
     ---------- user text input area

..which, despite a parent nowrap directive, was caused to wrap by the div (or other block-level) element.

now:

     ---------- header
    /
span-- svg:g -- svg:svg (with path extents matching those of svg:svg container)
    \
     ---------- user text input area

..whereby span has the css display:inline-block; directive set on it and a width specified. Here, the parent flex nowrap directive was adhered to, but locally (ie inside the span) the block layout is applied.


    CSS Howto..

    How to target iPhone 3GS AND iPhone 4 in one media query?

    How to overlay zoom icons over images and always keep them lined up perfectly?

    How to align divs right and left while using the CSS ghost element technique for vertical centering?

    CSS `will-change` - how to use it, how it works

    How can I resize an image in an HTML generated word document whilst retaining the aspect ratio?

    How to remove the arrows in a scroll bar through CSS

    How to prevent mouseenter event action with jQuery

    How to only use jquery .css() on a specific media query?

    How to find a div / panel in repeater and apply css?

    HTML5 vs HTML4 - h1 tag rendered with extra space - how to remove?

    How to shrink the width size hyperlink?

    How to get an image from a css animation keyframe to remain on the page after complete [duplicate]

    How make a fixed element be on top of another position fixed element

    How to prevent CSS3 transform from make elements unclickable

    css for mobile devices how to make '@media all' work on wordpress child theme

    How to register Css of html page in wordpress theme

    How to embed css in xml?

    How can I make the side elements spin on the x-axis in this animation?

    How do you name these tags in CSS? [closed]

    How to give different style, color to dotted border of links?

    How to override a *{list style:none} property

    How do I apply a style to all children of an elements

    How to get the values of the css style attributes in gwt

    How to overwrite css animation

    Align lists on showing or hiding

    How to create borders in bootstrap when div is 0 height

    Button transition using javascript and css, how to temporarily disable the transition

    How to Get Multiple elements to change color on hover CSS?

    Bootstrap - How to move styles in HTML to the .css from the example

    How to bring DIV2 to top WRT DIV1?