flex布局导致子元素的宽度无效

布局会使用到flex，但布局中存在一些问题，比如无法设置宽度

display: flex;

通过设置元素不换行，然后子元素分别设置了50px的宽度和高度，但是无法生效

原因
设置display:flex后，子元素在没有超过指定宽度的时候，子元素的宽度是有效的，但超过或小于指定宽度 的话，子元素的宽度就无效了,子元素不能直接设置width: 50px；
flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。0代表不会收缩。
可通过如下方式设置：
1 子元素设置宽度

.login-box {
  width: 950px;
  height: 500px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  box-shadow: 0px 0px 5px #777;
}
.login-left {
 flex: 0 0 450px;
  height: 500px;
  background-color: #388fff;
}
.login-right {
  flex: 0 0 450px;
  height: 500px;
  background: url(../assets/img/ybbg.jpg) no-repeat center center;
  background-size: cover;
}

2 子元素使用min-width代替width

.login-box {
  width: 950px;
  height: 500px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  box-shadow: 0px 0px 5px #777;
}
.login-left {
  min-width: 475px;
  height: 500px;
  background-color: #388fff;
}
.login-right {
  min-width: 475px;
  height: 500px;
  background: url(../assets/img/ybbg.jpg) no-repeat center center;
  background-size: cover;
}

3 子元素设置

flex-shrink:0;

flex 参数:

flex-grow 数字，规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink 数字，规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis 项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。