Long text in footer columns do not wrap

[aliuk2012]

While trying to implement the footer component for Digital Marketplace, we came across an issue with the footer, It doesn't seem to support long navigation text.

We wanted a three-column layout like this:

However, as soon as you have links with a lot of content the layout breaks into two columns and the third column overflows onto another row as in this example:

I think the expected behaviour should be that the link text adheres to the column width and wraps itself.

I haven't tested this out in other browsers but I did have this problem in Chrome 78.

[NickColley]

We have another issue here relating to the footer layout, makes me think we should be using CSS Grid for this: #1539

[aliuk2012]

Something interestingly if I reduce the window to tablet/mobile than the link text wraps.

Desktop:

Table/mobile

[aliuk2012]

Looks like it might be an issue with flex-basis anything other than desktop gets flex-basis: 200px added but in desktop it is not and the li items seem to have 100% width which is why the text does not wrap on desktops.

[aliuk2012]

I'll see if I can find some time to did a bit deeper into the issue but I think this is a bug and not a feature request.

[36degrees]

We believe this was resolved by the changes in #2462.