I am trying to make a whole div's max width property the width of one element inside of it, how would I be able to do this? Or would I not be able to do this at all.
This is an example use case:
<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>
I'm not that familiar with Tailwind, but I'll give you a solution in Pure HTML/CSS.
.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>If you don't want to use fit-content, you can just use display: inline-block; and remove the width from your parent as follows:
.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>Additionally, I would quote a comment by @voneiden in a similar question;
A block element will claim the horizontal space that the parent has to offer whereas an
inline-blockwill take the horizontal space it needs to display the content (unless overridden). If theinline-blockis bigger than the parent, it will overflow. You can make a block element to evaluate content width by settingwidth: fit-contenthowever that is not IE compatible.