Flexbox增长并不能使一个元素填充所有的空空间，并且正在创建一些神奇的空白。

Question

我想实现它，以便电子邮件框伸展所有的方式，并触摸注册按钮。

​

​

下面是我现在经常尝试的代码：

<div class="mb-12 inline-block">
    <h1 class="text-7xl font-bold mt-9">A better way to</h1>
    <h1 class="indent-9 text-7xl font-bold text-[#6E6BFF]">store your code</h1>

    <div class="mt-12 max-w-[610px]">
        <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">
        <div class="grow">
            <input class="w-[100%] text-[#9c9ea5] py-3 px-4 rounded-md" placeholder="Enter your email" type="email" name="emailinput">
        </div>

        <div class="flex grow justify-end">
            <button class="px-4 py-3 rounded-md bg-[#6E6BFF] text-white">Sign Up</button>
        </div>
    </div>
</div>

我做错什么了吗？

善良的卫兵，

亨利。

Answer 1

基于AngelSalazar的comment

按钮的包装div不应该有grow。不要使用flex grow justify-end，而是使用ml-4。