Seltsames Verhalten mit Textareas

Question

Ich habe das folgende Problem mit den Textareas in dieser Form. Das erste Bild ist in meinem Computer und die Formen scheinen in Ordnung zu sein, aber im zweiten Bild sehen die Textareas wirklich seltsam aus. Ich würde gerne wissen, was die Ursache für dieses Verhalten ist und wie ich das verbessern kann.

html

<div className="information-wrapper col-md-12 col-sm-12 col-xs-12"> 
    <div className="icon-container col-md-3 col-sm-3 col-xs-3"> 
    <img src="/name-image.png"/> 
    </div> 
    <div className="text-container col-md-9 col-sm-9 col-xs-9"> 
    <textarea className="information-textarea" placeholder={I18n.t('name')} /> 
    </div> 
</div> 

css

.information-wrapper{ 
    padding-right: 0; 
    padding-left: 0; 
    width: 100%; 
    height: 51px; 
    border-radius: 4px; 
    background-color: #ffffff; 
    margin-bottom: 10px; 
    .icon-container{ 
    max-width: 53.65px; 
    padding-right: 0; 
    padding-left: 0; 
    height: 51px; 
    border-right: 0.5px solid #e7e5e8; 
    text-align: center; 
    img{ 
     margin-top: 15px; 
     width: 22px; 
     height: auto; 
     -webkit-filter: grayscale(100%); 
     filter: grayscale(100%); 
    } 
    } 
    .text-container{ 
    padding-right: 0; 
    padding-left: 0; 
    height: 51px; 
    .information-textarea{ 
     height: 95%; 
     width: 100%; 
     font-size: 17px; 
     font-weight: bold; 
     padding-left: 5.5px; 
     padding-top: 15px; 
     border: 0; 
     border-radius: 4px; 
     resize: none; 
     white-space: nowrap; 
     overflow-x: scroll; 
    } 
    } 
} 

Answer 1

overflow: scroll Bildlaufleisten immer * zeigen, auch wenn sie nicht gebraucht werden.

* Wenn Sie jedoch keine Maus an Macs angeschlossen haben, werden die Bildlaufleisten automatisch ausgeblendet. Deshalb sehen Sie unterschiedliche Ergebnisse.

Sie möchten wahrscheinlich overflow: auto, die nur die Bildlaufleiste zeigt, wenn es erforderlich ist. Oder wie einer der Kommentare sagte, Sie wollen wahrscheinlich nur eine <input>.