Html 试图将两个div并排对齐，但失败了

在下面的代码中，我希望具有class

card列的div与具有class
card custom的div内联/相邻

我想我尝试的很简单，但是我找不到正确的显示和浮动组合来让它工作

我尝试用
display:flex
将父div做成一个flex，希望它能正常工作。但是，当它与它并排出现时，它弄乱了第一个div的大小

有人能告诉我我做错了什么吗

我这里有一个代码笔示例


.maxWidth{
宽度：100%；
最大宽度：1370px；
保证金：60像素自动；
填充：0 20px；
}
.卡片栏{
列数：5；
}
1.中场休息{
颜色：蓝色；
柱跨：全部；
边框：2倍实心；
}
.信用卡海关{
边框：1px纯蓝色；
宽度：430px；
高度：220px；
}

换行的卡片标题
这是一张较长的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长
换行的卡片标题
这是一张较长的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长
换行的卡片标题
这是一张较长的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长
您尝试过向左或向右浮动吗？确保卡列和卡自定义的总宽度不超过包含它们的div或元素的总宽度大小。此外，引导网格系统将帮助轻松解决此问题。
只需将其添加到css中即可

.card-custom{
    float: left;
}

你在正确的轨道上

向父div添加
display:flex
：

.intermission {
  display: flex;   /* NEW */
  color: blue;
  border: 2px solid;
}

第一个div将收缩，原因有两个：


flex容器的初始设置为
flex-shrink:1
。这意味着允许flex项收缩（防止它们溢出容器）
flex容器的另一个初始设置是
flex wrap:nowrap
。这意味着弹性项目仅限于一行，允许
flex-shrink:1
工作

将弹性收缩：0添加到第一个div以禁用收缩功能

有关更多详细信息，请参阅本答案中的“弹性收缩系数”部分：



。间歇{
显示器：flex；
颜色：蓝色；
边框：2倍实心；
}
.卡片栏{
列数：5；
}
.信用卡海关{
边框：1px纯蓝色；
宽度：430px；
高度：220px；
弹性收缩：0；/*新*/
}

换行的卡片标题
这是一张较长的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长
换行的卡片标题
这是一张较长的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长
换行的卡片标题
这是一张较长的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长
您是否尝试过对div使用style=“display:inline block；”之类的命令？请看下面提供的示例：