親要素がoverflow: hiddenの時、どうにかして子要素をoverflow: visibleにしてはみ出したい

どういうこと？

こんなことしたいことありませんか？

なぜできないの？

上記画像はElement-plusのel-tabとel-badgeを使っていますが、el-tabの全体にoverflow: hidden;がかかっており、はみ出した部分が消えていました。

じゃあどうするの？

overflow: hidden;を消して以下を設定します。

# うまくいかない例
<div id="parent" style="overflow: hidden">
 <div id="child">！</div>
</div>

# うまくいく例
<div id="parent" class="clearfix">
 <div id="child">！</div>
</div>

<style lang="css">
  .clearfix:before,
  .clearfix:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden; 
  }
  .clearfix:after { clear: both; }
  .clearfix { zoom: 1; } /* IE < 8 */
</style>

Element-plusではどうするの？

el-tabタグは自動で展開されるので展開後のクラスを変更する必要があります。

      <el-tabs type="border-card" class="clearfix">
        <el-tab-pane v-for="state in states" :key="state" :label="state">
          <template #label v-if="state == '送信失敗'">
            <el-badge
              value="！">
            <span>{{state}}</span>
            </el-badge>
          </template>
          <!-- content -->
        </el-tab-pane>
      </el-tabs>

<style lang="scss">
  // 展開されたあとのクラス名で上書きする
  .el-tabs__nav-scroll:before,
  .el-tabs__nav-scroll:after {
      content: ".";    
      display: block;    
      height: 0;    
      overflow: hidden; 
  }
  .el-tabs__nav-scroll:after { clear: both; }
  .el-tabs__nav-scroll { overflow: visible; } // 明示的にvisibleにする
  .el-tabs__nav-wrap { overflow: visible; } // 明示的にvisibleにする
</style>

参考資料

「overflow hidden child visible」で検索したら出てきました。