内部にテキストがあるときにHTML要素が拡大しないようにするにはどうすればよいですか？

私は2つの列を持っていますが、最初は200ピクセルでなければならず、ウィンドウの50％を超えてはならず、2列目は残りの部分を取る必要があります。内部にテキストがあるときにHTML要素が拡大しないようにするにはどうすればよいですか？

基本的に、私はそれが最初の行のように動作します：https://jsfiddle.net/vao88dd4/10/

.box { 
 
    display: flex; 
 
    background-color: orange; 
 
    flex-direction: row; 
 
    width: 100%; 
 
    height: 150px; 
 
} 
 
.left { 
 
    background-color: yellow; 
 
    width: 200px; 
 
    max-width: 50% 
 
} 
 
.right { 
 
    background-color: green; 
 
    flex-grow: 1; 
 
    overflow-wrap: break-word; 
 
    word-break: break-word; 
 
}

<span class="box"> 
 
    <span class="left">LEFT</span> 
 
    <span class="right">RIGHT</span> 
 
</span> 
 
<span class="box"> 
 
    <span class="left">LEFT</span> 
 
    <span class="right">RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT</span> 
 
</span>

Image

問題は、2列目のテキストがあるとき、それは大きくなり、ありますそれは最初の1つを縮小させる。

私はどのようにふりをして行動するのですか？

出典

2017-09-23 Luis Sequeira

コンテンツのために変更されても、すべての 'left'要素が同じサイズになるようにしますか？ – FluffyKitten

はい、テキストがあるときに左の要素が大きくなることは望ましくありません。 –

つまり、すべての「左」要素が同じになりたいのですか？または、テキストの量が異なる場合は、サイズが200pxより大きくなくても別のサイズでも構いませんか？ – FluffyKitten

<style> 
    .box { 
     display: flex; 
     background-color: orange; 
     flex-direction: row; 
     width: 100%; 
     height: 150px; 
    } 
    .left { 
     background-color: yellow; 
     min-width: 200px; 
     flex: 0; 
     overflow-wrap: break-word; 
     word-wrap: break-word; 
    } 
    .right { 
     background-color: green; 
     flex: 1; 
     overflow-wrap: break-word; 
     word-break: break-word; 
    } 

    @media screen and (max-width: 500px) { 
     .box { 
      flex-direction: column; 
     } 
     .left { 
      width: 100%; 
      background-color: lightgreen; 
     } 
     .right { 
      width: 100%; 
      background-color: teal; 
     } 
    } 
</style>

Iは最小幅追加：200pxのを、左スパン
に私は
左右+の両方でワードラップを一致追加私はフレックス追加：0をその指定されたサイズ
を維持し、左スパンに私はフレックス追加：1にすることを引き起こし、右スパンに残りの空き領域を埋める
これにより、適切な範囲でflex-growを削除しました
ビューポートの幅が500pxを下回るとメディアのクエリを追加し、ボックスをflex-direction：columnに変更しました。スパンを100％幅にする
これはあなたが求めているものを得るための最小限の変更だと私は思います。

HTMLあなたは物事を行うことができますので、あなたがcouldn、

<span class="box"> 
    <span class="left"> 
     LEFT aosdfnhaskldfn askldnf aklsjdfnk sdg adfh adf 
    </span> 
    <span class="right"> 
     RIGHT sfh sfgh srt tj sfgtj sfj fgj 
    </span> 
</span> 

<span class="box"> 
    <span class="left"> 
     LEFT sdh sdh sth rth sh 
    </span> 
    <span class="right"> 
     RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT 
     RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT 
     RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT 
    </span> 
</span>

メディアクエリは、物事が変更されたときにオーバーし、どのように完全に制御あなたが得るためにスーパー驚くべきものだ（私はいくつかのテキスト、ない要素の変更を追加しました）」そうでなければt。メディアクエリーのブレークポイントは非常に一般的なので、700px、1024px、1400pxのような上/下の外観を更新します。それはより多くの作業を必要としますが、あなたのページ/サイトはすべてのデバイスで素晴らしいように見えるので、それは価値があることがわかります。私は以下の私のコメントで述べたように

、あなたは<head>でこれを使用してください：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

出典

2017-09-23 19:08:55 agm1984

私は、画面が小さくなるとOPが200px以下になると思っています。 – kojow7

@ kojow7実際、私はOPがそれを200px以上にしたいと思っていますが、問題は '.right'カラムの可変幅が'。左のdivの幅が異なっています（リンクされた画像を参照） – FluffyKitten

これは、列が400pxより小さいときに画面の半分以上を占めるようにします。 –

あなたはtable要素を使用するか、またはあなただけの近代的なブラウザをターゲットにしている場合display: gridを使用することをお勧めします。

出典

2017-09-23 19:18:09 Marko

内部にテキストがあるときにHTML要素が拡大しないようにするにはどうすればよいですか？

答えて

関連する問題