Flex框不会缩放到整个页面的宽度

Question

我已经尝试为容器flexbox（width: 100%;）设置display: flex;，但只有我在flex容器中的项目和后续div包装到此容器的右侧时才会有效在同一条线上。我已尝试将新div设置为float: left和clear: both，但似乎没有任何效果。 Flex容器不会占用整行，下一个标记也不会包含到下一行。这是css和标记：

.container {
display: flex;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-around;
align-items:center;
margin: 0 0 0 0;
width: 100%;
clear: both;
}

.item {
flex-grow: 1;
flex-basis: auto;
}

<div id="mainContainer" class="container" >
        <div id="divRegistration" class="item">
            <asp:Button runat="server" ID="btnRegistration" CssClass="btn btn-primary btn-lg" Text="Register" OnClick="btnRegistration_Click" ></asp:Button>
        </div>
        <div id="divSchedule" class="item">
            <asp:Button runat="server" ID="btnSchedule" CssClass="btn btn-primary btn-lg" Text="Schedule" OnClick="btnSchedule_Click" ></asp:Button>
        </div>
    </div>