0
251
Vistascss: cómo hacer que todos los elementos flexibles tengan la misma altura y anchura pero sin utilizar un valor fijo de altura y peso
Tengo 3 elementos flexibles aquí, pero el ancho del segundo elemento es más grande que otros, ya que la descripción del segundo elemento es muy larga. 
¿Es posible hacer que todos los elementos flexibles tengan la misma altura y anchura, pero sin utilizar un valor fijo de altura y peso, cuando cambia el contenido de la descripción?
Aplicación.js
import "./styles.css"; export default function App() { const containerStyles = { display: "flex", flexDirection: "column", backgroundColor: "green", marginRight: "10px", flex: 1 }; return ( <div style={{ display: "flex" }}> <div style={containerStyles}> <div>Title 1</div> <div>Description 1</div> <div>Click to view detail</div> </div> <div style={containerStyles}> <div>Title 2</div> <div>Description 2 veryyyy longgggggggggggggggggggggg</div> <div>Click to view detail</div> </div> <div style={containerStyles}> <div>Title 3</div> <div>Description 3</div> <div>Click to view detail</div> </div> </div> ); } codigosandbox
https://codesandbox.io/s/crazy-cookies-nw0ykj
3 Respuestas
Responde la pregunta0
La caja del medio es grande debido a una palabra longgggggg... . Si lo desborda a la siguiente línea, las cosas funcionarán bien para usted. Establecer la propiedad overflow-wrap en anywhere debería funcionar.
Intenta configurarlo para el contenedor flexible
const containerStyles = { display: "flex", flexDirection: "column", backgroundColor: "green", marginRight: "10px", flex: 1, overflowWrap: 'anywhere', };Entonces puede ver que el texto se corta para respetar el ancho del contenedor para que tenga el mismo ancho y alto.
0
Como olvidé que también necesitas el mismo ancho, modifiqué mi respuesta.
En su caso, use justify-content: space-between para hacer que la altura del elemento secundario dentro de flexbox parezca igual, y overflow-wrap: anywhere para permitir que el texto más largo se ajuste para hacer que los elementos flexibles tengan el mismo ancho.
0
Tu larga palabra es lo que la está rompiendo. Debe establecer el desbordamiento en cualquier cosa que no sea visible. También puede agregar la propiedad de ajuste de palabra para mantener todo visible.
const containerStyles = { display: "flex", flexDirection: "column", backgroundColor: "green", marginRight: "10px", flex: 1, "word-wrap": "break-word", overflow: "hidden" };