display: flex;flex-shrink:0；使得外层div宽度等于内层div宽度

<div class="outer">
    <div class="inner"></div>
  </div>

内层div如果不设置宽度的情况下会与外层div宽度一致，因为div是块级元素，默认是父容器的100%。

外层div如果不设置高度的话会与内层div高度保持一致，因为它会根据内容的多少自适应高度。

.inner {
      background: red;
      height: 300px;
    }
    .outer {
      background: green;
      width: 200px;
    }

外层div不随内层div宽度变化

.inner {
      background: red;
      height: 300px;
      width: 200px;
    }
    .outer {
      background: green;
    }

设置body的display:flex;再设置内层和外层div的flex-shrink:0，则可以实现外层div宽度随内层div宽度变化。

body {
      display: flex;
    }
    .inner {
      background: red;
      height: 300px;
      width: 200px;
      flex-shrink: 0;
    }
    .outer {
      background: green;
      flex-shrink: 0;
    }