设置flex-direction: row后，自定义图标与文本为何仍纵向排列？

我尝试制作一个包含自定义播放按钮、文本以及YouTube视频缩略图的可点击区域，要求三者在同一行显示。已完成自定义播放按钮制作，缩略图尺寸设置正确，将容器设为display: flex且flex-direction: row后，三者仍无法处于同一行。注释掉播放按钮后，文本与缩略图可正常同行显示。请问遗漏了什么？

代码示例 #

CSS代码 #

body {
  background: darkgrey;
}

.page-container {
  background: lightgrey;
  width: 320px;
  margin: auto auto;
  height: 600px;
}

.section-container {
  background: white;
  width: 288px;
  margin: auto auto;
  height: 500px;
}

.video-container {
  display: flex;
  flex-direction: row;
}

.video-thumbnail {
  background-image: url('https://i3.ytimg.com/vi/I-k-iTUMQAY/mqdefault.jpg');
  width: 71.63px;
  height: 40.14px; 
  background-size: 71.63px 40.14px;
}

/* Play button */
.play-button-outer {
  display: inline-block;
  box-sizing: border-box;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  background-color: rgba(0, 115, 144, 0.16);
  cursor: pointer;
}

.play-button-inner {
  margin: 0 auto;
  top: calc(50% - 6.645px);
  position: relative;  
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6.645px 0 6.645px 11.04px;
  border-color: transparent transparent transparent #007390;
}

HTML代码 #

<div class="page-container">
  <div class="section-container">
    <div class="video-container">
      <div class="play-button-outer">
        <div class="play-button-inner"/>
      </div>
      <div class="text">Some text</div>
      <div class="video-thumbnail"/>
    </div>
  </div>
</div>

问题根源在于HTML中错误使用了自闭合的div标签。<div>属于非自闭合标签，浏览器无法正确解析<div/>这种写法，会将其视为未闭合的标签，导致DOM结构混乱，进而破坏flex布局的正常排列。

只需修改两处自闭合的div标签，改为标准的闭合写法即可：

• 将<div class="play-button-inner"/>改为<div class="play-button-inner"></div>
• 将<div class="video-thumbnail"/>改为<div class="video-thumbnail"></div>

修改后的完整HTML代码 #

<div class="page-container">
  <div class="section-container">
    <div class="video-container">
      <div class="play-button-outer">
        <div class="play-button-inner"></div>
      </div>
      <div class="text">Some text</div>
      <div class="video-thumbnail"></div>
    </div>
  </div>
</div>

修改后，flex容器会正常识别三个子元素，播放按钮、文本和缩略图就能在同一行显示了。

内容的提问来源于stack exchange，提问作者physicsboy