Div内容比父项更宽

Question

嗨，我正在构建一个Rails应用程序以水平显示一些链接。它们水平显示，没有我期望的包裹。但是div比其中的内容宽得多。

标记：

<div id="timeline-container">
  <% @timeline.reverse.each do |p| %>
    <div id='timeline-item'>
      <ul>
        <% if p.class == RSpotify::Playlist %>
          <li><%= link_to image_tag(p.images[0]['url'], id: p.name.to_s, class: "playlist-cover", title: p.tracks_added_at[p.tracks_added_at.keys[0]], height:"10%", width:"10%"), {:controller => 'playlists', :action => 'timeline', :playlist => p.name, :user => @user.to_hash, :offset => 0}, class: "timeline-item" %></li>
        <% else %>
          <li><%= link_to image_tag(p[1].album.images[0]['url'], class: "track-cover", title: p[0].title.to_s, height: "15%", width:"15%"), {:controller => 'playlists', :action => 'timeline', :playlist => p[0].playlist_name, :user => @user.to_hash, :offset => 0}, id:p[0].title, class: "timeline-item" %></li>
        <% end %>
        <li><p id='moment-id'>fuck</p></li>
      </ul>
    </div>
  <% end %>
  <hr size="100"/>
</div>

css：

div {
  white-space: nowrap;
  width:fit-content;
}
[![enter image description here][1]][1]
table {
  display:inline-block;
  width:fit-content;
}

#timeline-item {
  width:fit-content;
  display:inline-block;
}

#timeline-container{
  display:inline-block;
}

#moment-id {
  display: inline;
  text-align: center;
}

截屏：

Answer 1

您可以将display: flex添加到#timeline-container中，以使其所有子级水平显示。

div {
  white-space: nowrap;
  width:fit-content;
}
[![enter image description here][1]][1]
table {
  display:inline-block;
  width:fit-content;
}


#moment-id {
  display: inline;
  text-align: center;
}

#timeline-container{
  display: flex;
  width: 100%;
}

#timeline-item {
  flex: 1;
}

#timeline-item img {
  width: 100%;
}

<div id="timeline-container">
  <div id='timeline-item'>
    <ul>
      <li><img src="https://picsum.photos/200/200" /></li>
      <li>
        <p id='moment-id'>fudge</p>
      </li>
    </ul>
  </div>
  <div id='timeline-item'>
    <ul>
      <li><img src="https://picsum.photos/200/200" /></li>
      <li>
        <p id='moment-id'>fudge</p>
      </li>
    </ul>
  </div>
</div>
<hr size="100" />