Flexbox 的增长不是让一个元素填满所有的空白空间，而是制作了一些神奇的空白？？？？答案

【问题标题】：Flexbox grow is not making one element fill all of the empty space, and some magic whitespace is being made ????Flexbox 的增长不是让一个元素填满所有的空白空间，而是制作了一些神奇的空白？？？？
【发布时间】：2022-01-29 04:13:11
【问题描述】：

我想实现它，让邮箱一直伸展，触摸注册按钮。

这是我的代码，我曾经尝试过这样做：

<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>

我做错了什么吗？

善意的保护，
亨利。

【问题讨论】：

按钮包装的 div 不应该有grow。而不是flex grow justify-end，使用ml-4。另外使用内置类而不是创建随机类（w-[100%]相当于w-full）
非常感谢您，您介意将其纳入其他人的解决方案吗？

标签： javascript html css tailwind-css

【解决方案1】：

基于 AngelSalazar 的 comment:
按钮的包装 div 不应包含 grow。代替flex grow justify-end，使用ml-4。

【讨论】：