Tengo 9 botones que tienen texto, dentro de un div. Todos tienen css que hace que todos ocupen 1/9 del espacio.
div { border: 1px solid black; height:200px; width:200px; padding:0px; } button { width:calc(100% / 3); height:calc(100% / 3); border-radius:0px; } <div> <button>Hello world!</button><button>Hello world!</button><button>Hello world!</button><br><button>Hello world!</button><button>Hello world!</button><button>Hello world!</button><br><button>Hello world!</button><button>Hello world!</button><button>Hello world!</button> </div>Cuando tienen el mismo texto, funcionan perfectamente bien y me dan el resultado deseado como ves arriba.
div { border: 1px solid black; height:200px; width:200px; padding:0px; } button { width:calc(100% / 3); height:calc(100% / 3); border-radius:0px; } <div> <button>I am a different button!</button><button>Hello world!</button><button>Hello world!</button><br><button>I'm different too!</button><button>Hello world!</button><button>foo bar foo bar</button><br><button>Hello world!</button><button>Hello world!</button><button>So am I!</button> </div>Cuando tienen un texto diferente, todo se estropea. También intenté usar flexbox, pero solo hizo que los botones llenaran la altura pero se envolvieran incorrectamente.
Lo que quiero es una forma de tener 9 botones en un div rectangular que siempre tengan 1/9 del tamaño del div, sin importar cuál sea su texto. Otra cosa que necesito es que los botones se puedan escalar al div, en caso de que alguien cambie el tamaño de su pantalla o necesito que el div tenga un tamaño diferente. Si su solución usa JS/Jquery, está bien.
No soy un experto en css. ¿Cómo puedo arreglar esto? ¿Hay una mejor manera de hacer esto? Gracias.
Esto funciona usando display: flex y flex-wrap: wrap :
div { border: 1px solid black; height:200px; width:200px; padding:0px; display: flex; flex-wrap: wrap; } button { width: 33.333%; height: 33.333%; border-radius:0px; } <div> <button>I am a different button!</button><button>Hello world!</button><button>Hello world!</button><br><button>I'm different too!</button><button>Hello world!</button><button>foo bar foo bar</button><br><button>Hello world!</button><button>Hello world!</button><button>So am I!</button> </div>