Estoy tratando de hacer que la propiedad de ancho máximo de un div completo sea el ancho de un elemento dentro de él, ¿cómo podría hacer esto? O no sería capaz de hacer esto en absoluto.
Este es un ejemplo de caso de uso:
<div class="max-w-[610px]"> <div class="mt-12 mb-12"> <p class="mb-8">With RepoZoid, storing your own code is as easy as pie. Just add a new entry, paste your code in - and you're off to the races.</p> <p>It's as simple as 1, 2, 3 - with sharing options and more coming in the future!</p> </div> <div class="flex flex-row mb-3"> <div class="grow"> <input class="w-full text-[#9c9ea5] py-3 px-4 rounded-md" placeholder="Enter your email" type="email" name="emailinput"> </div> <div class="pl-2"> <button class="px-4 h-full rounded-md bg-[#6E6BFF] text-white">Sign Up to the Beta</button> </div> </div>No estoy tan familiarizado con Tailwind, pero te daré una solución en HTML/CSS puro.
.parent { padding: 10px; background: yellowgreen; display: flex; /* Add `flex-direction: column;` if you want each child to be in one-row */ width: fit-content; } .child { width: 100px; height: 50px; } .child:nth-child(1) { background: red; } .child:nth-child(2) { background: blue; } <div class="parent"> <div class="child"></div> <div class="child"></div> </div> Si no quiere usar fit-content , puede usar display: inline-block; y elimine el width de su padre de la siguiente manera:
.parent { padding: 10px; background: yellowgreen; display: inline-block; } .child { display: inline-block; /* Make it `display: block;` if you want each child to be in one-row */ width: 100px; height: 50px; } .child:nth-child(1) { background: red; } .child:nth-child(2) { background: blue; } <div class="parent"> <div class="child"></div> <div class="child"></div> </div>Además, citaría un comentario de @voneiden en una pregunta similar ;
Un elemento de bloque reclamará el espacio horizontal que el padre tiene para ofrecer, mientras que un
inline-blockocupará el espacio horizontal que necesita para mostrar el contenido (a menos que se anule). Si elinline-blockes más grande que el principal, se desbordará. Puede crear un elemento de bloque para evaluar el ancho del contenido configurandowidth: fit-contentsin embargo, eso no es compatible con IE.