由于白色空间，内联块无法正常工作：nowrap;

Question

我目前正在尝试为学校项目制作内联文章。 文字溢出，我不知道为什么，但我有一个想法。 当我删除white-space：nowrap; - 文本做它想要的，填充粉红色框，但内联不再工作。

有什么想法吗？我附上了一个codepen。

http://codepen.io/torarne_n/pen/PwQBmx

.slider {
width: 1225px;
height: 600px;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
padding: 1rem;
background-color: #ccc;
margin-bottom: 10px;
}

.slides {
height:500px;
width:1225px;
display: inline-block;
background-color: aqua;
}

.intro-image {
height: auto;
width: auto;
display: inline-block;
background-color: pink;
}

.intro-text {
height: auto;
width: 300px;
display: inline-block;
background-color: fuchsia;
} 

Answer 1

问题在于内部元素继承了nowrap。只需在内部元素上恢复正常：

.intro-text {
    height: auto;
    width: 300px;
    display: inline-block;
    background-color: fuchsia;
    white-space: normal;
}