¿Hay alguna manera de hacer que la etiqueta div del texto del logotipo llamada Título ocupe su espacio de contenido dentro del cuadro flexible principal en lugar de envolverlo?
No quiero configurar el Título, que es solo un div al 100%, o usar espacios en blanco: ahora. Solo quiero que actúe como un div donde llena su espacio de contenido y solo se ajusta si también lo necesita.
Además, ¿por qué sucede esto cuando otro elemento está configurado al 100 %? Al igual que el fragmento de código a continuación.
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>Elimine width: 100% de la definición de TestDiv y agregue margin-left: 2rem (o el valor que desee) para separarlo del otro elemento flexible (es decir, el componente Title ):
const TestDiv = styled.div ` margin-left: 2rem; border: 1px solid red; `; Alternativamente, puede establecer los anchos de los elementos flexibles como porcentajes (totalizando el 100 %) del ancho de sus padres ( Header's) , como se muestra a continuación:
const Title = styled.div ` width: 10%; `; const TestDiv = styled.div ` width: 90%; border: 1px solid red; `;Dado que no quería usar espacios en whitespace: nowrap , supongo que una solución alternativa sería parametrizar el ancho del Title div de acuerdo con el texto del título. Establecí el width del Title para que sea igual al width + 3 ch (3 adicionales solo para el relleno y me aseguro de que no se ajuste). Supongo que si esto se alarga demasiado, podría establecer max-width: 25ch o algo así.
Espero que esto ayude.
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>