Question

我有function quantity_check() { var avail = $('#available').val(); var quant = $('#quantity').val(); //alert(avail) if (quant<=avail){ return true; } else $('#quantity').val(0); }和2列的包装。第二列是500px宽度（200px）。

如果在第一列中有一个元素flex: 0 0 200px，则第一列将根据此元素展开。

如何仅根据包装器和第二列的宽度停止第一列的增长？

在这里小提琴：https://jsfiddle.net/b58aatdr/3/

＆＃13;

> 300px

＆＃13;

#hello {
  display: flex;
  width: 500px;
}
#hello > div {
  height: 50px;
}
#hello > div:first-child {
  background-color: yellow;
}
#hello > div:last-child {
  background-color: red;
  flex: 0 0 200px;
}
#baddiv {
  width: 400px;
  height: 20px;
  background-color: purple;
}

＆＃13;

Answer 1

如果您希望将max-width: 300px调整为最高300px并使用width: 300px;，如果您希望它始终为300px，即使内容不太宽，也可以设置position: absolute。

根据评论进行更新

2：nd div组使用另一个技巧display: table，其中一个不需要设置任何宽度，它使用父div和右div来限制左div增长超过300px

另请注意，这是元素如何工作的正常行为，如果它们没有固定/最大宽度设置，它们会增长（或在某些情况下会换行）以适合其内容。

根据评论更新2

3：rd div组使用flex代替.hello { display: flex; width: 500px; } .hello > div { height: 50px; } .hello > div:last-child { background-color: red; flex: 0 0 200px; } .baddiv { width: 400px; height: 20px; background-color: purple; } /* alt. 1 */ .hello.nr1 > div:first-child { background-color: yellow; max-width: 300px; } /* alt. 2 */ .hello.nr2 > div:first-child { flex: 1; position: relative; background-color: lime; } .inner { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; } /* alt. 3 */ .hello.nr3 { display: table; table-layout: fixed; width: 500px; } .hello.nr3 > div { height: 50px; display: table-cell; } .hello.nr3 > div:first-child { background-color: cyan; } .hello.nr3 > div:last-child { background-color: red; width: 200px; }，其中一个不需要设置任何宽度。

＆＃13;

<div class="hello nr1">
  <div>
    <div class="baddiv"></div>
  </div>
  <div></div>
</div>

<br>

<div class="hello nr2">
  <div>
    <div class="inner">
      <div class="baddiv">
      </div>
    </div>
  </div>
  <div></div>
</div>

<br>

<div class="hello nr3">
  <div>
    <div class="baddiv"></div>
  </div>
  <div></div>
</div>

＆＃13;

Table `order`

+----+----------+-------------+---------------------+---------+-------+
| id | table_id | waiter_name | date_time           | status  | total |
+----+----------+-------------+---------------------+---------+-------+
|  1 | Table 1  | Waiter 1    | 2016-03-03 12:44:27 | Pending |  1500 |
+----+----------+-------------+---------------------+---------+-------+

table `orderitems`

+----+----------+-------------+----------+
| id | order_id | food_item   | item_qty |
+----+----------+-------------+----------+
|  1 | 1        | Chicken Fry |        2 |
|  2 | 1        | Beef        |        1 |
+----+----------+-------------+----------+

table `foodinfo`
+----+----------------+-----------+-----------+----------+
| id | food_item      | status    | category  | price    |
+----+----------------+-----------+-----------+----------+
|  1 | Chicken Fry    | Available | Meat      |      600 |
|  2 | Beef           | Available | Meat      |      300 |
+----+----------------+-----------+-----------+----------+

＆＃13;

根据另一个固定flex列的宽度

1 个答案: