How to don't scale down element

Question

I need to make scroll slider with these rectangles, but when the window size is small, the rectangles goes scale down.

I add pictures for better understanding.

I have tried set the width and hight of div years but it doesn't help.

.years-center {
    text-align: center;
    display: flex;
    overflow-x: scroll;
}

.years {
    display: inline-block;
    margin: 10px;
    width: 220px;
    height: 150px;
    background-color: #FFFFFF;
    margin-top: -60px;
    box-shadow: 0 0px 29px rgba(0,0,0,0.15);
}

.years-p {
    font-size: 80px;
    color: rgb(68, 68, 68);
    font-weight: 900;
    line-height: 0.252;
    text-align: center;
    padding-top: 45px;
}

.years-name {
    font-size: 21px;
    font-family: "Muli";
    color: rgb(68, 68, 68);
    font-weight: bold;
    line-height: 1.238;
    text-align: center;
    padding-top: 34px;
}

<div class="years-center">
    <div class="years years1">
        <p class="years-p">8</p>
        <p class="years-name">let na trhu</p>
    </div>
    <div class="years years2">
        <p class="years-p">10</p>
        <p class="years-name">profesionálů</p>
    </div>
    <div class="years years3">
        <p class="years-p">32</p>
        <p class="years-name">stálých klientů</p>
    </div>
    <div class="years years4">
        <p class="years-p">27</p>
        <p class="years-name">věkový průměr</p>
    </div>
</div>

The next similar problem is in the section here. The answer help only on first problem.

wrong right

HTML

     <div class="trusts-slider">
        <div class="company">
            <div><img src="img/duveruje/prima.png" alt="prima"></div>
            <div><img src="img/duveruje/hayashi.png" alt="hayashi"></div>
            <div><img src="img/duveruje/projekt.png" alt="projekt"></div>
            <div><img src="img/duveruje/heckl.png" alt="heckl"></div>
        </div>
        <div class="company second-company">
            <div><img src="img/duveruje/energy.png" alt="energy"></div>
            <div><img src="img/duveruje/ipconnect.png" alt="ipconnect"></div>
            <div><img src="img/duveruje/rts.png" alt="rts"></div>
            <div><img src="img/duveruje/cejka.png" alt="cejka"></div>
        </div>
    </div>

CSS

.trusts-slider {
    overflow-x: scroll;
}

.company {
    margin-left: 14%;
    margin-right: 14%;
    display: flex;
    justify-content: space-between;
    text-align: center;
    padding-bottom: 17px;
}

.company div {
    padding-top: 50px;
    background-color: white;
    width: 240px !important;
    height: 170px !important;
    box-shadow: 0 0px 29px rgba(0,0,0,0.06);
    margin-left: 10px;
    margin-right: 10px;
}

.second-company {
    padding-bottom: 69px;
}

Possible duplicate of [Width ignored on flexbox items](https://stackoverflow.com/questions/21406397/width-ignored-on-flexbox-items) — Kaddath, Jul 15 '19 at 08:42
The guilty one here is the `flex` display, there are different options for you in the duplicate link — Kaddath, Jul 15 '19 at 08:43

Kyle · Accepted Answer · 2019-07-15T09:40:51.727

0

white-space: nowrap; can be used to prevent elements from responding to the width of the parent element, however it will not work when display is set to flex.

This should do the trick.

.years-center {
    white-space: nowrap; /* <--- added */
    text-align: center;
    display: block; /* <--- updated */
    overflow-x: scroll;
}

edited Jul 15 '19 at 09:40

answered Jul 15 '19 at 08:39

Kyle

302
2
5

Thank you very much, it work. But I have next similar problem, but this solution doesn't work on it. – John Jul 15 '19 at 08:44
It looks like you are trying to stack them this time, in which case you need to remove **white-space: nowrap;** from the style of that parent element – Kyle Jul 15 '19 at 09:11
Code only answers are rarely useful. Please can you **edit** and add some explanation as to ***why*** this code solves this problem. Cheers – Martin Jul 15 '19 at 09:17
Sorry, I don't understand how do you think that I can solve the 2 problem, can you write down the whole idea please? – John Jul 15 '19 at 10:45

How to don't scale down element

1 Answers1