【CSS】flex内のoverflow-xでborderを正しく表示したい

下記のようなHTMLを書くと、スクロールバーを動かすと正しくborderが表示されません
JS Bin

html5
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width">
6  <title>JS Bin</title>
7</head>
8<body>
9  <style>
10    .card {
11      border: solid 3px #f00;
12      width: 300px;
13      height: 100px;
14      overflow-x: scroll;
15    }
16    .line {
17      height: 30px;
18      display: flex;
19      border-bottom: solid 1px #555;
20      align-items: center;
21    }
22    .line div {
23      white-space: nowrap;
24    }
25  </style>
26  
27  <div class="card">
28    <div class="line">
29      <div>One 18.25 ounce package chocolate cake mix.</div>
30      <div>One can prepared coconut pecan frosting.</div>
31      <div>Three slash four cup vegetable oil.</div>
32      <div>Four large eggs. One cup semi-sweet chocolate chips.</div>
33      <div>Three slash four cups butter or margarine.</div>
34    </div>
35  </div>
36</body>
37</html>

.line 要素を .card の大きさに合わせないようにするにはどのようにすればいいでしょうか

追記1

あくまでborder-bottomを指定したいのは.lineにです
実際には.cardの中に.lineは複数回出てきて、.lineの中の要素はアイコン、テキスト、など様々です

gin

2016/11/24 03:02 編集

「One 18.25 ～ or margarine.」全部にborder-bottomを適用するということですか？

行動規範の内容に同意します

回答2件

ベストアンサー

いくつかやり方はありますが、これでどうでしょう。
下記を追加してみてください。

css
1.card:after {
2	clear:both;
3	display:block;
4	content:"";
5}
6.line {
7	float:left;
8	clear:left;
9}

投稿2016/11/24 07:35

gin

総合スコア2722

aoisensi

2016/11/24 08:00

上記のコードではうまく動きましたが今書いてるコードではレイアウトが崩れてしまいました widthで直接指定することにしますありがとうございました

行動規範の内容に同意します

.cardでwidthを300pxにしてるので、.lineでのborderの長さも300pxになってしまっているのではないでしょうか。
.lineにoverflow-x: scroll;とかしてあげるとうまくいくと思います。
そうするとスクロールバーが邪魔になると思いますが、jQueryのプラグインでいじったり、親要素を作ってそれでスクロールバーだけうまく隠したりすると解決するとおもいます。

投稿2016/11/24 06:38