div or p tag inside of flex box wrapping

Question

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/styled-components@4.0.1/dist/styled-components.min.js"></script> <div id="react"></div>

Answer 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 (ie 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;
`;

Answer 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/styled-components@4.0.1/dist/styled-components.min.js"></script> <div id="react"></div>