当放置在div旁边时，输入的宽度不为100％

Question

我正在尝试使警报消息出现在Input元素旁边。

我希望我可以使输入的div的宽度为100％，这会将警报消息推到div之外。之所以采用这种方法，是因为我希望Input能够很好地适合文档其余部分的流程。

<div class="main">

    <!-- Make this 100% width -->
    <Input class="input" type="text" />

    <!-- Push this outside div, to the right, and keep the tops level -->
    <div class="alert">
        alert message
    </div>
</div>

<style>
.main {
  width: 300px;
  border: 1px solid black;
  display: flex;
  flex-wrap: nowrap;
  overflow: visible;
}

.input {
  width: 100%;
  box-sizing: border-box;
}
</style>

我准备了一个小提琴来尝试传达消息。它显示了所需的外观和我的尝试。 https://jsfiddle.net/goughjo/4jao60wv/24/

任何帮助表示赞赏