html - 如何使这个 div 全自动大小？

Question

我正在尝试制作一份餐厅菜单，但我不知道该怎么做我想使名为“menu-spacer”的 div 达到它可以获得的最大尺寸。

有了“min-width”和“max-width”，它只需要最小宽度。

渲染截图:

    <div class="wrapper container w-50">
                <div class="wrapper menu block">
                    <div class="menu-content">Un menu tout à fait normal</div>
                    <div class="menu-spacer"></div>
                </div>
                <div class="price block">50€</div>
            </div>
            <div class="wrapper container w-50">
                <div class="wrapper menu block">
                    <div class="menu-content">Un menu</div>
                    <div class="menu-spacer"></div>
                </div>
                <div class="price block">50€</div>
            </div>

    .wrapper {
        display: flex;
    }

    .menu-content{
        width: ;
    }

    .menu-spacer{
        width: max-content;
        border-bottom: green 2px dotted;
    }

    .menu {
        width: 80%;
        text-align: left;
        color: black;
        padding-bottom: 0px;
    }

    .price {
        width: min-content;
        text-align: right;
        color: black;
    }

Answer 1

我认为这里的 secret 在于了解 vw 和 vh，您可以在这里研究:

Viewport units: vw, vh, vmin, vmax

参见 fiddle :JSFiddle

.wrapper {
  display: flex;
}

.menu-content {
  width: ;
}

.menu-spacer {
  width: 100vw;
  border-bottom: green 2px dotted;
}

.menu {
  width: 80%;
  text-align: left;
  color: black;
  padding-bottom: 0px;
}

.price {
  width: min-content;
  text-align: right;
  color: black;
}

<div class="wrapper container w-50">
  <div class="wrapper menu block">
    <div class="menu-content">Un menu tout à fait normal</div>
    <div class="menu-spacer"></div>
  </div>
  <div class="price block">50€</div>
</div>
<div class="wrapper container w-50">
  <div class="wrapper menu block">
    <div class="menu-content">Un menu</div>
    <div class="menu-spacer"></div>
  </div>
  <div class="price block">50€</div>
</div>