Html Flexbox布局。无法获取相同宽度的框

我一直在浏览网络，寻找解决我的问题的方法，让所有的FlexBox都具有相同的宽度，但运气不好。所以我试着在这里问你

正如您可能看到的，如果描述很长，框也会更宽。一直在玩

wordwrap:break-word
请参阅下面的代码片段或


。按钮{
显示器：flex；
}
.按钮>a{
利润率：0.5px；
}
.食物盒{
弹性：1；
位置：相对位置；
背景色：白色；
最小高度：300px；
背景色：#ffffff；
长方体阴影：0 3px 3px rgba（0,0,0,0.10）；
边框颜色：#d3e0e9；
边框：1px实心#b3c9e5；
单词包装：打断单词；
边距：0！重要；
填充：0！重要；
}
.食物盒.食物盒图像{
位置：绝对顶部：0左：0；
背景图像：url（'https://images.pexels.com/photos/461198/pexels-photo-461198.jpeg?h=350&auto=compress&cs=tinysrgb');
背景尺寸：封面；
宽度：100%；
最小高度：150px；
背景色：红色；
}
.食物盒.食物盒内容物{
位置：绝对底部：0左：0；
单词包装：打断单词；
宽度：100%；
最小高度：150px；
背景色：#e25822；
颜色：#fff；
字体大小：70%；
填充顶部：60px；
左侧填充：5px；
右侧填充：5px；
}
.食物盒.食物盒徽章{
显示：表格；
背景色：#ffffff；
位置：绝对位置；
左：50%；
最高：50%；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
宽度：100px；
高度：100px；
线高：100px；
边界半径：50%；
字体大小：12px；
颜色：#000000；
文本对齐：居中；
-网络工具包盒阴影：0px 0px 39px 4px rgba（0,0,0,0.75）；
-moz盒阴影：0px 0px 39px 4px rgba（0,0,0,0.75）；
盒影：0px 0px 39px 4px rgba（0,0,0,0.75）；
边框颜色：#d3e0e9；
边框：1px实心#b3c9e5；
左侧填充：10px；
右边填充：10px；
}
.食物盒.食物盒徽章{
颜色：#666；
显示：表格单元格；
垂直对齐：中间对齐；
线高：1.2米；
单词包装：打断单词；
}

餐前小吃
Velsmakende og orientalske Tapasreter！
科尔德堡
韦尔格·梅勒姆·沃克尔致斯马卡富勒·科尔德博德瓦里安特。。。
Påsmart
维格弗里特一维特商店乌特瓦格面包店，斯奈特，Rundstyker。
米德尔哈夫斯·布法特
东方的马特雷特梅德斯彭内德·斯梅克！
瓦玛特
我是瓦姆马特雷特！
您可以为asp:LinkButton元素添加宽度，例如：

[runat]{
   width: calc(100% / 5);
}

这似乎可以通过在“食物盒”上应用固定宽度的溢出：隐藏来解决。我去掉了“断字”，把内容放在中心：

.buttons {
  display: flex;
}

.buttons > a {
  margin: 0 5px;
}

.food-box {
  flex: 1;
width: 200px;
overflow: hidden;
  position: relative;
  background-color: white;
  min-height: 300px;
  background-color: #ffffff;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.10);
  border-color: #d3e0e9;
  border: 1px solid #b3c9e5;
  word-wrap: break-word;
  margin: 0 !important;
  padding: 0 !important;
}

.food-box .food-box-image {
  position: absolute top: 0 left: 0;
  background-image: url('https://images.pexels.com/photos/461198/pexels-photo-461198.jpeg?h=350&auto=compress&cs=tinysrgb');
  background-size: cover;
  width: 100%;
  min-height: 150px;
  background-color: red;
}

.food-box .food-box-content {
  position: absolute bottom: 0 left: 0;
/* word-wrap: break-word; */
text-align: center;
  width: 100%;
  min-height: 150px;
  background-color: #e25822;
  color: #fff;
  font-size: 70%;
  padding-top: 60px;
  padding-left: 5px;
  padding-right: 5px;
}

.food-box .food-box-badge {
  display: table;
  background-color: #ffffff;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  line-height: 100px;
  border-radius: 50%;
  font-size: 12px;
  color: #000000;
  text-align: center;
  -webkit-box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75);
  border-color: #d3e0e9;
  border: 1px solid #b3c9e5;
  padding-left: 10px;
  padding-right: 10px;
}

.food-box .food-box-badge span {
  color: #666;
  display: table-cell;
  vertical-align: middle;
  line-height: 1.2em;
  word-wrap: break-word;
}

我认为这两个设置和从
.foodbox
中删除
宽度应该可以解决问题，因为
.foodbox
元素不是弹性项，而是弹性项的子项：

.buttons > * {
  width: 20%;
}
.buttons > * > *{
  width: 100%;
  text-align: center;
}

感谢大家提供了3个很棒的答案！。。。虽然所有这些方法都能解决这个问题，但我发现@Johannes解决方案最简单，无需为食物盒元素本身设置指定的宽度……：）谢谢谢谢@zornfett。。也许应该注意到这一点，但尽量避免指定食物盒的恒定宽度：）谢谢！您只需在flex项上添加
flex:1
@迈克尔：已经试过了，没用。。。你自己试试：）我注意到很多问题多次被标记为重复题。。。70%的时候都是对的。。在这种情况下。。它更像是一个将军。。。“原来的CSS搞乱了flexbox的布局，我也不知道是什么原因……我用默认的flexbox“模板”进行了试用。成功后，我缩小了CSS，去掉了样式，等等……成功了……但是！。我需要的正是我所做的，而且无法解决……因此……重复”技术问题“是的..但不是解决方案..我测试了你的代码。我也测试了我的解决方案。它成功了。请看我评论中的演示。嗯..是的..我看到你做到了：）可能是我的一些代码（或页面代码）这是不正确的..不管怎样..你知道@Michael_B如何让它像max 4一样响应，而在桌面上，移动设备上每行只有一个？谢谢@Michael_B的帮助：）终于对flexstuff有了更多的了解..与引导网格col和row的太“连接”了..但是flexbox更“灵活”？呵呵：）