flex

记录一个小问题：
html结构：

<section class="container">
  <article class="box1">
    <section class="children1"></section>
  </article>
  <article class="box2"></article>
</section>

css:

.container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 420px;
  min-width: 300px;
}
.box1 {
  overflow: auto;
}
.children {
  display: flex;
  flex-direction: flex-start;
  align-items: center;
  justify-content: flex-start;
}
.box2 {
  overflow: auto;
}

当children1里面图片元素过多的时候，会自动扩展宽度，导致box1和box2一起被拉长。给children设置width又不能自适应宽度达到children1贴近box1右边框的效果。然后发现给box1和box2都设置width: 100%，就可以解决这个问题，达到我想要的效果。