How can I make the logo text div tag, called Title, take up its content space inside the parent flexbox without wrapping?
I prefer not to set the Title div to 100% or use white-space: nowrap. I simply want it to behave like a regular div where it fills its content space and only wraps if necessary.
Additionally, why does this issue occur when another element is set to 100%, as shown in 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0d7e7974616869206e62607d62636863797e4d39233d233c">[email protected]</a>/dist/styled-components.min.js"></script>
<div id="react"></div>