首先，我正在使用Blazor，不確定這是否會影響我的問題，可能不會。我肯定這在某種程度上是重復的，但在看了5/6個其他問題+文章和大量的嘗試后，我已經力不從心了。

問題是

我目前正在嘗試將flexbox中的一個div擴展到可用空間。我知道通過正確的flexbox方向和flex設置使用flexbox可以做到這一點，但我想我并沒有完全理解它，這并不奇怪，因為我對Blazor/HTML/CSS相當陌生。

在該圖中，您可以看到分割線下包含選項卡頁面的選項卡組件。然而，這些標簽頁不會延伸到底部。粉色是基本背景色，帶有三個按鈕和兩個小文本的白色區域是標簽頁。底部和右邊有更多的空間，但是標簽頁沒有像我想象的那樣擴展。

屏幕上顯示程序運行的圖片

代碼片段

我將省略掉在這個上下文中不重要的東西，但是我想仍然有一些標記和樣式。

MainView
--------
<div class="page">
    @if (_loginService.UserLoggedIn)
    {
        <div class="navbar-container">
            <Navbar OnRefresh=@(() => RefreshView()) OnLogout=@(() => _viewModel.OpenDialog()) />
        </div>
    }
    <main class="body-container">
        @Body
    </main>
</div>

MainView CSS
------------
main {
    flex: 1 0 auto;
    display: flex;
    flex-flow: column;
}

.page {
    flex: 1 1 auto;
    background-color: white;
    display: flex;
    flex-flow: column;
}

.navbar-container {
    flex: 0 0 auto;
}

.body-container {
    flex: 1 1 auto;
}

AdministrationTabView
---------------------------
<div class="page-wrapper">
    <TabControl FontSize="13pt">
        <Tab Text="User">
            <AdministrationUserGridView/>
    </Tab>
    <Tab Text="Roles">
        <AdministrationRoleGridView/>
    </Tab>
    </TabControl>
</div>

AdministrationTabView CSS
-------------------------
.page-wrapper {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

TabPage
-------
<div style="height: 100%; width: 100%; flex: 1 1 auto; display: flex; flex-direction: column;">
    @if (ParentControl?.ActiveTab == this)
    {
        @ChildContent
    }
</div>

TabControl
----------
<div class="tabcontrol-wrapper">
    <div class="tab-buttonrow" role="group">
        @foreach (var tab in Tabs)
        {
            <button class="tab-button" style="@ResolveBackgroundColor(tab) @ResolveTextColor(tab) font-size: @tab.FontSize; width: @ResolveWidth(tab);" disabled=@Disabled @onclick=@(() => SwapActiveTabOnClick(tab))>
                <div class="tab-button-hover-wrapper">
                    @tab.Text
                </div>
            </button>
        }
    </div>
    <Divider />
    <div class="tab-body">
        <CascadingValue Value="this">
            @ChildContent
        </CascadingValue>
    </div>
</div>

TabControl CSS
--------------
.tabcontrol-wrapper {
    padding-left: 10px;
    padding-right: 10px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.tab-buttonrow {
    padding-top: 5px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: start;
    gap: 5px;
}

.tab-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

AdministrationUserGridView
--------------------------
<div class="tab-page-wrapper">
    <div class="grid-side-container">
        <div class="grid-commandbutton-container">
            <GridCommandrow Style=ComponentStyle.Primary />
        </div>
        <div class="grid-content-container">
            Content
        </div>
    </div>
    <div class="grid-container">
        Grid
    </div>
</div>

AdministrationUserGridView CSS
------------------------------
.grid-container {
    flex: 1 1 auto;
    overflow: auto;
}

.grid-side-container {
    width: 250px;
    padding-right: 20px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
}

.grid-commandbutton-container {
    width: 100%;
    flex: 0 0 auto;
}

.grid-content-container {
    width: 100%;
    flex: 1 1 auto;
    overflow: auto;
}

這種flexbox方法(就我的理解和應用而言(可能有點草率))似乎并不奏效，盡管我已經知道它應該奏效。它確實使對齊某些東西或防止特定容器不收縮或不增長變得更容易，但對我來說，另一個核心目的，即擴展部分，并沒有完全按照我希望的方式工作，它在某些情況下確實如此，但在像這樣的情況下卻不是這樣。

我想以正確的方式學習，所以我很高興聽到任何建議、想法或批評。

這對你的問題有用嗎？

.container {
      display: flex;
      flex-direction: row;
      width: 100%;
      height: 50px;
  }

  .div-1 {
      background-color: red;
      flex: 1;
  }

  .div-2 {
      background-color: blue;
      flex: 0.2;
  }

  .div-3   {
      background-color: green;
      flex: 0.2;
  }

<div class="container">
    <div class="div-1"></div>
    <div class="div-2"></div>
    <div class="div-3"></div>
</div>