Don't let flex to wrap label text of toggle

Question

I have the following code (with "@fluentui/react": "^8.33.0",)

import React from 'react';
import { Toggle } from '@fluentui/react/lib/Toggle';

class TestIt extends React.Component {
  render() {
    return (
      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
        <Toggle onText="Width Limit Auto" offText="Width Limit Manual"/>
      </div>
    )

  }
}
export default TestIt;

It has the following result where the label text is wrapped. If I remove display: 'flex', flexWrap: 'wrap', the label text is not wrapped.

I don't want to wrap the label text; I don't understand why display: 'flex', flexWrap: 'wrap' (for some reason / other code, I need to keep it) has an effect on that.

For instance, there is no problem with codepen: https://codepen.io/SoftTimur/pen/JjJaRvv.

Could anyone help?

Answer 1

I think the main problem is width of parent element. First you have unnecessary wrapper over Toggle Component because it covers only one element inside flex:

Here you are few Codepen examples.

Note:

Codepen has dynamic width and that's the reason why text wrap doesn't exist. But it shows up when you have overflow or fixed width. Put at your local example some CSS for body and html or at parent element:

body, html {
  width: 100%;
  height: 100%;
}