如何从 flex-direction 列中删除 margin-bottom？答案

【问题标题】：How remove margin-bottom from flex-direction column?如何从 flex-direction 列中删除 margin-bottom？
【发布时间】：2021-11-14 05:02:17
【问题描述】：

我是 flexbox 新手，但遇到了问题。

我不明白，为什么我的 div 这么长。我尝试设置一个高度值，但它并没有改变任何东西。

奇怪的是这个 div 的内容大小是正确的。

这是我的代码：

       <div className="competences-content">
            <div className="competences-text-content">
                <h1 className="competences-title">Langage de création</h1>
                <p className="competences-text">blablabla</p>
            </div>
            <input className="competences-image" type="image" src="/assets/img/competences.png" />
        </div>

我的 CSS：

.competences-content{
    display:flex;
    flex-flow: row;
    position: relative;
    top: 45px;
    width: 100%;
    margin-left: 5%;
}

.competences-text-content{
    flex-direction: column;
    margin-right: 15px;
    width: 50%;
}

.competences-title{
    font-family: Poppins-bold;
    color: #200A40;
    font-size: 44px;
    letter-spacing: 1px;
}

.competences-text{   
    overflow-y: auto;
    max-height: 50%;
 
    font-family: Poppins-regular;
    font-size: 10px;
    line-height: 16px;
}

.competences-image{
    height: 375px;
}

我尝试将我的 CSS 值一一删除，遗憾的是没有找到问题的原因。你能帮我吗？

亲切的问候

【问题讨论】：

请正确minimal reproducible example，而不仅仅是一些似乎没有重现问题的sn-ps（jsfiddle.net/6gupet1w）

标签： javascript html css reactjs flexbox

【解决方案1】：

.competences-text-content{
max-height: value of your choice;
flex-direction: column;
margin-right: 15px;
width: 50%;
}

尝试在 css 中为此类添加 max-height 属性。并添加一个您希望它以 px / rem 为单位的值。

【讨论】：