'div or p tag inside of flex box wrapping

Is there a way to have the logo text div tag called Title take up its content space inside the parent flexbox instead of wrapping.

I don't want to set the Title which is just a div to 100% or use white-space:nowrap. I just want it to act like a div where it fills its content space and only wraps if it needs too.

Also why does this happen when another element is set to 100%. Like the code snippet below.

const styled = window.styled;

const Header = styled.div `
  width: 100%;
  display: flex;
  border: 1px solid gray;
  align-items: center;
  width: 100%;
  min-height: 50px;
  padding: 10px 10px 10px 30px;
  background-color: #147189;
  color: white;
`;

const Title = styled.div `
`;
const TestDiv = styled.div `
   width: 100%;
  border: 1px solid red;
`;

const App = () => {
    return ( 
      <div>
        <Header >
        <Title > Logo Text </Title> 
        <TestDiv > hello </TestDiv> </Header> 
      </div>
     );
  }

    ReactDOM.render(<App/>,
      document.getElementById("react")
    );
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<script src="//unpkg.com/[email protected]/dist/styled-components.min.js"></script>

<div id="react"></div>
javascripthtmlcssflexbox


Solution 1:[1]

Remove width: 100% from the TestDiv definition and add margin-left: 2rem (or whatever value you wish) to separate it from the other flex item (i.e the Title component):

const TestDiv = styled.div `
    margin-left: 2rem; 
    border: 1px solid red; 
`;

Alternatively, you could set the widths for the flex items as percentages (totaling 100%) of their parent's (Header's) width, like below:

const Title = styled.div `
    width: 10%;
`;

const TestDiv = styled.div `
    width: 90%;
    border: 1px solid red;
`;

Solution 2:[2]

Since you did not want to use whitespace: nowrap, I guess a workaround would be to parameterise the width of the Title div according to the title text. I set width of Title to be equal to width + 3 ch (3 extra just for padding and make sure it does not wrap). I guess if this might get too long, you could set max-width: 25ch or something like that.

Hope this helps.

const styled = window.styled;

const Header = styled.div `
  width: 100%;
  display: flex;
  border: 1px solid gray;
  align-items: center;
  width: 100%;
  min-height: 50px;
  padding: 10px 10px 10px 30px;
  background-color: #147189;
  color: white;
`;

const Title = styled.div `
`;
const TestDiv = styled.div `
   width: 100%;
  border: 1px solid red;
`;


const style = () => ({});

const setWidth = (width) => ({
  width: `${width + 3}ch`,
});

const App = () => {

    
    return ( 
      <div>
        <Header >
        <Title style={ setWidth('Logo Text Whatever'.length) } > Logo Text Whatever </Title> 
        <TestDiv > hello </TestDiv> </Header> 
      </div>
     );
  }

    ReactDOM.render(<App/>,
      document.getElementById("react")
    );
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<script src="//unpkg.com/[email protected]/dist/styled-components.min.js"></script>

<div id="react"></div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Chizaram Igolo
Solution 2 cSharp

Related Questions