flex-basis getting overridden by width property

Question

In the below example,

If I set the width to 400px, the width changes to 400px. To my knowledge, if both width and flex-basis are given, flex-basis overrides width. But here this is not happening.

Can someone explain why this is happening?

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
}

.scroller {
  display: flex;
}

.scroller img {
  flex-grow:1;
  flex-shrink: 1;
  flex-basis: 350px;
  width:400px; 
  

}

<div class="container">
  <div class="scroller">
    <img src="http://placehold.jp/3d4070/ffffff/300x150.png" alt="" />
    <img src="http://placehold.jp/e11919/ffffff/300x175.png" alt="" />
    <img src="http://placehold.jp/9119e1/ffffff/300x180.png" alt="" />
    <img src="http://placehold.jp/19e170/ffffff/300x185.png" alt="" />
    <img src="http://placehold.jp/3d4070/ffffff/300x190.png" alt="" />
    <img src="http://placehold.jp/e11919/ffffff/300x195.png" alt="" />
    <img src="http://placehold.jp/9119e1/ffffff/300x200.png" alt="" />
    <img src="http://placehold.jp/19e170/ffffff/300x150.png" alt="" />
    <img src="http://placehold.jp/3d4070/ffffff/300x175.png" alt="" />
  </div>
</div>