如何让这个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

我认为这里的秘密在于了解vw和vh，你可以在这里进行研究：

Viewport units: vw, vh, vmin, vmax

请看小提琴：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>

​